📊 Budget Hierarchy Shading

Overview

Budget Hierarchy Shading adds progressive visual shading to nested budget groups, making it instantly clear how deeply nested each group is. Level 1 groups are lightest, and Level 5 groups are darkest, with line items automatically matching their parent group's shade.

Key Features

• 5 Shading Levels - Progressive darkening up to 5 levels deep
• Automatic Inheritance - Line items match parent group shading
• Dark Mode Adaptive - Intelligently adapts to Dark Mode and Custom Theme
• Yellow Highlight Preservation - Unsaved changes stay highlighted
• Smooth Hover States - Better visual feedback on interactions
• Real-Time Updates - Updates when expanding/collapsing groups
• At-a-Glance Clarity - Quickly identify group hierarchy and relationships

Getting Started

Enabling the Feature

1. Click the JT Power Tools extension icon
2. Find "Budget Hierarchy Shading" toggle
3. Toggle it ON
4. Navigate to any JobTread budget page
5. Budget groups now show progressive shading

How It Works

Shading Levels

Level	Description	Visual Appearance
Level 1	Top-level groups	Lightest shade (nearly white in light mode)
Level 2	Groups nested 1 level deep	Light gray
Level 3	Groups nested 2 levels deep	Medium gray
Level 4	Groups nested 3 levels deep	Dark gray
Level 5	Groups nested 4+ levels deep	Darkest shade

Line Item Inheritance

Line items automatically inherit their parent group's shading:

• Line item in Level 1 group → Uses Level 1 shading
• Line item in Level 3 group → Uses Level 3 shading
• Makes it clear which group a line item belongs to
• Maintains visual consistency throughout budget

Visual Examples

Budget Structure Example

Budget Overview (Level 1 - Lightest)
├── Site Work (Level 2)
│   ├── Excavation (Level 3)
│   │   └── Line Item: Backhoe Rental (Level 3)
│   └── Grading (Level 3)
│       └── Line Item: Grading Labor (Level 3)
├── Foundation (Level 2)
│   ├── Concrete (Level 3)
│   │   ├── Footings (Level 4)
│   │   │   └── Line Item: Concrete Mix (Level 4)
│   │   └── Slab (Level 4)
│   │       └── Line Item: Slab Pour (Level 4)
│   └── Rebar (Level 3)
└── Framing (Level 2 - Darkest of this example)
            

Benefits

Improved Organization

• Visual Hierarchy - Instantly see budget structure
• Faster Navigation - Find groups and items quickly
• Reduced Errors - Clear which group items belong to
• Better Planning - Understand budget breakdown at a glance

Enhanced Collaboration

• Team Understanding - New team members grasp structure faster
• Client Presentations - More professional-looking budgets
• Cross-Department - Accounting and field teams aligned on structure

Working with Other Features

Dark Mode Integration

When Dark Mode is enabled:

• Shading levels adapt to dark background
• Level 1 uses darkest shade
• Level 5 uses lightest shade (inverted)
• Maintains clear visual hierarchy in dark theme

Custom Theme Integration

With Custom Theme (Premium):

• Shading adapts to your custom background color
• Progressive shading maintained regardless of theme
• Works seamlessly with any color palette

Yellow Highlight Preservation

Edited budget cells:

• Yellow highlighting always visible
• Shows unsaved changes clearly
• Works on top of hierarchy shading
• Never lose track of pending edits

Common Use Cases

Complex Commercial Projects

Large projects with many nested groups:

• Multi-phase construction projects
• Projects with multiple buildings
• Detailed trade breakdowns

Estimating & Bidding

Creating detailed estimates:

• Organize costs by phase, trade, and subtask
• Clear visual structure for client presentation
• Easy to spot missing categories

Budget Reviews

Reviewing budgets with stakeholders:

• Quickly navigate to specific sections
• Understand relationships between groups
• Identify areas for cost reduction

Best Practices

Budget Organization

1. Limit Depth - Try to stay within 3-4 levels for clarity
2. Logical Grouping - Group by phase, trade, or location
3. Consistent Naming - Use clear, descriptive group names
4. Balanced Structure - Avoid having some branches much deeper than others

Visual Clarity

• Collapse deep groups when not actively editing them
• Use the shading to verify item placement
• Review structure in both light and dark modes

Troubleshooting

Shading Not Appearing

Solution:

• Verify Budget Hierarchy Shading is enabled
• Refresh the budget page
• Make sure you're viewing a budget page (not schedule or dashboard)
• Check browser console for errors

Colors Look Wrong

Solution:

• Check if Dark Mode or Custom Theme is affecting shading
• Adjust monitor brightness for better visibility
• The shading is intentionally subtle for professional appearance

Shading Not Updating

Solution:

• Expand/collapse groups to trigger re-rendering
• Refresh the page
• Disable and re-enable the feature

Line Items Wrong Shade

Solution:

• Line items should match their immediate parent group
• Check if line item is actually nested under the group you think it is
• Expand parent group to verify structure

Technical Details

Shading Algorithm

The feature calculates shading based on:

1. DOM structure analysis to determine nesting depth
2. Progressive alpha values for transparency
3. Adaptive color selection based on theme mode
4. Real-time mutation observation for dynamic updates

Performance

• Lightweight CSS-based implementation
• No impact on JobTread's native functionality
• Minimal browser resource usage
• Smooth updates when expanding/collapsing

Related Guides

• Text Formatter - Format budget descriptions
• Dark Mode - Works seamlessly with shading
• Custom Theme - Shading adapts to your theme
• Installation & Setup - Get started