1. Component Analysis

1.1 Current State

• Budget comparison dialog exists but has limited functionality.
• Only available during the budget approval workflow.
• Only compares new budget against existing approved budget.
• No navigation capability between different budget comparisons.
• Limited access points for users.

1.2 Component Requirements Summary

Based on the “Budget comparisons” component (ID: 58647), the following enhancements are required.

1.2.1 Core Requirements

1. Expand access points: view comparison dialog outside of approval workflow.
2. Enhanced navigation: navigate back and forth to compare any two different budgets.

1.2.2 Specific Implementation Details

• Add “Compare budgets” action option in budget listing kebab menu.
• Add “Compare budgets” action option in budget details page.
• Update comparison dialog with enhanced navigation capabilities.

2. Existing Mockups Analysis

2.1 Related Mockups Identified

• HAL-M120: Account Budget — Individual budget details page.
• HAL-M121: Account Budgets — Budget listing page.
• HAL-M138: Budget — General budget interface.
• HAL-M118: Account Budget Action Dialogs.
• HAL-M117: Account Budget States Actions.

3. Required Specification Updates

3.1 Budget Listing Page Updates (HAL-M121)

Current Spec Modifications Needed

• Kebab menu enhancement: add “Compare budgets” action option to each budget row’s kebab menu.
• Action availability: available for all approved budgets.
• Action behavior: opens the enhanced comparison dialog with the selected budget as the primary (right-side) budget.

New UI Elements Required

• Kebab menu item: “Compare budgets” with comparison icon.
• Tooltip: “Compare this budget with other approved budgets.”

3.2 Budget Details Page Updates (HAL-M120)

Current Spec Modifications Needed

• Action bar enhancement: add “Compare budgets” button to the action bar or toolbar.
• Button placement: position near other action buttons (Edit, Copy, etc.).
• Action behavior: opens comparison dialog with current budget as primary (right-side) budget.

New UI Elements Required

• Primary action button: “Compare Budgets” with comparison/balance scale icon.
• Button state management: disabled for non-approved budgets.

3.3 Enhanced Comparison Dialog Specification

Dialog Layout Requirements

• Two-column layout: left column for comparison baseline; right column for selected budget.
• Fixed labels: column headers and field labels remain fixed during navigation.
• Difference highlighting: blue text indicates differences, calculated relative to the left column baseline.

Navigation Controls

• Left column navigation: Previous/Next arrows to cycle through available approved budgets chronologically.
• Right column navigation: Previous/Next arrows to cycle through available approved budgets chronologically.
• Arrow state logic:
  • Hide arrows when no previous or next budget exists.
  • Hide arrows when previous or next would show the same budget as the opposite column.

Data Display Requirements

• Budget selection logic:
  • Right side: user-selected budget (from action trigger).
  • Left side: most recent approved budget before the right-side budget’s effective period.
• Difference calculation: all variance indicators update dynamically as navigation occurs.
• Field coverage: include all comparable budget fields (amounts, dates, status, etc.).

4. New Mockup Requirements

• Updated HAL-M121: Budget listing with new kebab menu item.
• Updated HAL-M120: Budget details with new “Compare budgets” button.
• New mockup: enhanced comparison dialog showing two-column layout with navigation.
• New mockup: comparison dialog navigation states (arrows shown or hidden).

5. Technical Specifications

5.1 API Requirements

• Budget comparison endpoint: retrieve two budgets for comparison with calculated differences.
• Navigation support: endpoint to get previous or next approved budget for a given budget and account.
• Difference calculation: server-side calculation of variances between budget pairs.

5.2 Frontend Requirements

• Dialog component: reusable comparison dialog with navigation capability.
• State management: track both left and right column budget selections.
• Navigation logic: handle chronological budget traversal with boundary conditions.

6. User Experience Considerations

6.1 Workflow Integration

• Seamless access: users can access comparison from multiple entry points.
• Intuitive navigation: arrow controls clearly indicate direction and availability.
• Context preservation: dialog remembers the user’s navigation state during the session.

6.2 Performance Considerations

• Lazy loading: load budget data on demand during navigation.
• Caching strategy: cache recently viewed budget comparisons.
• Response time: navigation between budgets should be under 500 ms.

7. Implementation Priority

7.1 Phase 1: Core Functionality

1. Add “Compare budgets” actions to listing and details pages.
2. Create enhanced comparison dialog with basic two-column layout.
3. Implement difference calculation and highlighting.

7.2 Phase 2: Enhanced Navigation

1. Add navigation controls to the comparison dialog.
2. Implement chronological budget traversal logic.
3. Add arrow state management (show or hide logic).

7.3 Phase 3: Optimization

1. Implement performance optimizations (caching, lazy loading).
2. Add advanced comparison features (historical trends, etc.).
3. Apply user experience refinements based on testing.

8. Acceptance Criteria

8.1 Functional Requirements

• ✓ “Compare budgets” action available in budget listing kebab menu.
• ✓ “Compare budgets” button available on budget details page.
• ✓ Comparison dialog opens with selected budget on right side.
• ✓ Left side shows chronologically previous approved budget.
• ✓ Navigation arrows allow cycling through available budgets.
• ✓ Arrows hidden when no navigation option exists.
• ✓ Differences highlighted in blue text, calculated relative to left column.
• ✓ Dialog accessible outside of approval workflow.

8.2 Technical Requirements

• ✓ Responsive design works on desktop and tablet.
• ✓ Navigation performance under 500 ms.
• ✓ Proper error handling for missing or invalid budgets.
• ✓ Accessibility compliance (keyboard navigation, screen readers).

9. Mockup Update Action Items

1. Update HAL-M121 (Account Budgets): add “Compare budgets” to kebab menu.
2. Update HAL-M120 (Account Budget): add “Compare budgets” button to action bar.
3. Create new mockup: enhanced comparison dialog with two-column layout.
4. Create new mockup: navigation arrow states in comparison dialog.
5. Update HAL-M118 (Action Dialogs): include comparison dialog if not already present.

10. Document Metadata

• Document generated: 2025-08-27
• Component reference: Budget comparisons (ID: 58647)
• Estimated implementation: 2,280–3,060 hours