refactor: Split header component into focused sub-components

[algirdasc]

📋 Summary

This PR refactors the monolithic header component into three focused sub-components to improve maintainability, testability, and prepare the codebase for TanStack Query integration.

🎯 Motivation

The original header component had multiple responsibilities mixed together in a single 200-line file, making it:

• Hard to test individual features
• Difficult to maintain and extend
• Not reusable across the application
• Complex for future TanStack Query integration

🔧 Changes

Created Components

1. SidebarToggleComponent (app-sidebar-toggle)

• Menu button with notification badge
• 31 lines (8 HTML + 3 SCSS + 20 TS)
• Handles sidebar toggle and import notifications

2. CalendarInfoComponent (app-calendar-info)

• Calendar name and balance display
• 48 lines (23 HTML + 3 SCSS + 22 TS)
• Shows current balance and monthly balance with expense report popover

3. DateNavigationComponent (app-date-navigation)

• Date picker and navigation controls
• 127 lines (38 HTML + 3 SCSS + 86 TS)
• Year/month/date picker with prev/today/next buttons

4. HeaderComponent (Refactored)

• Smart container component
• 83 lines (18 HTML + 3 SCSS + 62 TS)
• Orchestrates sub-components and handles routing

📊 Metrics

Code Reduction in Main Component

File	Before	After	Reduction
TypeScript	103 lines	62 lines	40% ⬇️
HTML Template	85 lines	18 lines	79% ⬇️
SCSS Styles	12 lines	3 lines	75% ⬇️
Total	200 lines	83 lines	58% ⬇️

Overall Structure

• Files Created: 9 new component files
• Total Lines: 289 lines (well-organized across focused components)
• Component Count: 3 new sub-components + 1 refactored container

✨ Benefits

1. Single Responsibility Principle: Each component has one clear purpose
2. Improved Testability: Can test components in isolation
3. Better Reusability: Components can be used elsewhere in the app
4. Easier Maintenance: 40-80% smaller files, clearer boundaries
5. TanStack Query Ready: Perfect structure for adding injectQuery() in the future

🏗️ Architecture

Before (Monolithic)

HeaderComponent
  ├─ Sidebar toggle logic
  ├─ Calendar info display
  ├─ Date picker (year/month/date)
  ├─ Navigation buttons
  ├─ View mode management
  └─ Routing logic
  
  ❌ 200 lines in single component
  ❌ Mixed responsibilities

After (Modular)

HeaderComponent (Container)
  ├─ SidebarToggleComponent (31 lines)
  ├─ CalendarInfoComponent (48 lines)
  └─ DateNavigationComponent (127 lines)
  
  ✅ Clear separation of concerns
  ✅ Easy to test individually

🔄 Component Communication

Follows the Smart/Dumb component pattern:

• HeaderComponent (Smart): Handles routing and orchestration
• Sub-components (Dumb): Presentational, emit events via @Output()

🔍 Quality Assurance

• ✅ ESLint: Zero errors
• ✅ Prettier: Fully formatted
• ✅ TypeScript: Strict mode passing
• ✅ Angular Standards: Style guide compliant
• ✅ Backward Compatibility: 100% compatible (no breaking changes)

📁 Files Changed

Created (9 files)

src/app/modules/main/header/components/
├── sidebar-toggle/
│   ├── sidebar-toggle.component.ts
│   ├── sidebar-toggle.component.html
│   └── sidebar-toggle.component.scss
├── calendar-info/
│   ├── calendar-info.component.ts
│   ├── calendar-info.component.html
│   └── calendar-info.component.scss
└── date-navigation/
    ├── date-navigation.component.ts
    ├── date-navigation.component.html
    └── date-navigation.component.scss

Modified (3 files)

• header.component.ts (simplified)
• header.component.html (simplified)
• header.component.scss (simplified)

Documentation (3 files)

• frontend/REFACTORING_SUMMARY.md - Complete overview
• frontend/HEADER_REFACTORING.md - Detailed documentation
• frontend/header-component-structure.txt - Visual diagrams

🚀 Future Work

This refactoring sets the foundation for:

• TanStack Query integration per component
• Better state management with Angular Signals
• Enhanced testing coverage
• Potential reuse in other modules (reports, dashboard)

🧪 Testing

Manual testing confirms:

• All functionality preserved
• No visual changes
• Same user experience
• Performance maintained

📝 Breaking Changes

None - The header component API remains unchanged:

<app-header
    [calendar]="calendar"
    [visibleDateBalance]="balance"
    [visibleDate]="currentDate">
</app-header>

---

Note: This is preparation work for upcoming TanStack Query integration. The modular structure will make it much easier to add data fetching capabilities to individual components.