Migrate from AngularJS 1.x to Angular 21

[devin-ai-integration]

Summary

Complete migration of the BlurAdmin dashboard application from AngularJS 1.5.8 to Angular 21 (latest).

Changes

• Build system: Replaced Gulp/Bower with Angular CLI (ng build, ng serve)
• Framework: AngularJS 1.5.8 → Angular 21.2.x with standalone components
• Routing: ui-router ($stateProvider) → @angular/router with lazy-loaded routes
• Templates: Converted all AngularJS syntax (ng-repeat, ng-if, ng-click, ng-model) to Angular control flow (@for, @if, (click), [(ngModel)])
• Styling: Bootstrap 3.3.5 → Bootstrap 5.3.x, preserved all SCSS
• Charts: Consolidated Morris, Chartist, amCharts into Chart.js v4
• Tables: Replaced angular-smart-table with custom sortable/searchable/paginated component
• Tree: Replaced ng-js-tree with native recursive Angular tree component
• Forms: Added both template-driven and reactive forms
• Services: Converted all AngularJS factories/services to @Injectable services using Angular signals for state
• Documentation: Added MIGRATION_NOTES.md covering all patterns, conversions, and known issues

Components migrated

• 6 theme components (sidebar, page-top, content-top, back-top, msg-center, ba-panel)
• 2 theme services (SidebarService with inject(), ThemeConfigService)
• 6 dashboard sub-components (feed, todo, traffic chart, pie chart, line chart, popular apps)
• 11 UI feature pages (typography, buttons, icons, modals, grid, alerts, progress bars, notifications, tabs, slider, panels)
• 3 component pages (timeline, mail, tree view)
• 1 chart page (Chart.js with 6 chart types)
• 2 map pages (Google Maps embed, Leaflet placeholder)
• 2 table pages (basic tables, smart table with pagination reset on search)
• 3 form pages (inputs, layouts, wizard)
• 1 profile page

Bug fixes from review

• Fixed SidebarService field initializer crash: switched to inject(ThemeConfigService) so the dependency is available during field initialization under ES2022 useDefineForClassFields semantics
• Fixed smart table pagination: currentPage now resets to 1 when search results shrink below the current page range

Build verified

ng build completes successfully with no errors.

Review & Testing Checklist for Human

• Run npm install && ng build to verify the build passes locally
• Run ng serve and navigate all routes to verify routing works (dashboard, ui/, components/, charts/, maps/, tables/, form/, profile)
• Verify sidebar navigation expands/collapses submenus and highlights active route
• Check Chart.js charts render correctly on dashboard and charts pages
• Verify form wizard step navigation and reactive form validation on form pages
• Test smart table sorting, searching (verify pagination resets), and pagination
• Verify responsive behavior — sidebar collapses at 1200px and hides at 500px

Notes

• Calendar widget on the dashboard is a placeholder (previously used FullCalendar AngularJS directive — install @fullcalendar/angular to restore)
• Leaflet maps page is a placeholder (install leaflet + @asymmetrik/ngx-leaflet to restore)
• Morris, Chartist, and amCharts have been consolidated into Chart.js — chart types are preserved but rendering library differs
• See MIGRATION_NOTES.md for comprehensive documentation of all patterns converted, third-party dependency replacements, and manual interventions needed

Link to Devin session: https://partner-workshops.devinenterprise.com/sessions/481ede263d7b46fe924b1c97f5945b7d
Requested by: @bsmitches

---

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring

[devin-ai-integration]

Devin Review found 2 new potential issues.

View 13 additional findings in Devin Review.

[devin-ai-integration]

🔴 Sidebar collapse toggle is broken on wide screens — only main content padding changes, sidebar and header stay fixed

When the user clicks the hamburger menu toggle on a screen wider than 1200px, toggleMenuCollapsed() sets the menuCollapsed signal to true, which adds .menu-collapsed to <main> (app.component.html:3). However, only app.component.scss:10-12 responds to this class by changing padding-left from 180px to 50px. The sidebar itself stays at a fixed width: 180px (sidebar.component.scss:12) and the page-top header stays at left: 180px (page-top.component.scss:4). Neither component has any CSS rule tied to the collapsed state. This causes the main content area to shift left under the still-full-width sidebar, creating a broken overlapping layout. The original AngularJS code had dedicated .menu-collapsed CSS rules that shrank the sidebar to 52px and adjusted the header, but these were not migrated.

Missing CSS rules from original codebase

The original SASS had:

@media (min-width: 1200px) {
  .menu-collapsed {
    .al-main { margin-left: 50px; }
    .al-footer { padding-left: 83px; }
  }
}
@media (min-width: 501px) {
  .menu-collapsed {
    .al-sidebar { width: 52px; }
  }
}

None of these rules exist in the new code. The global styles.scss:66-84 only handles automatic collapse via media queries at ≤1200px, not manual toggle.

Prompt for agents

The sidebar collapse toggle button (hamburger icon) is wired up and changes state, but the visual response is incomplete. When .menu-collapsed is applied to <main>, only padding-left changes from 180px to 50px. The sidebar (sidebar.component.scss) stays at width: 180px and the page-top header (page-top.component.scss) stays at left: 180px. This causes the main content to overlap under the sidebar.

To fix this, you need to add CSS rules that respond to the collapsed state. There are several approaches:

1. Add global styles in styles.scss that handle .menu-collapsed for sidebar and page-top (similar to how the media queries already work at line 66-84).

2. Or pass the collapsed state into the sidebar and page-top components and adjust their styles dynamically.

At minimum, when .menu-collapsed is active on <main>:
- .al-sidebar should shrink to ~50px width with text labels hidden
- .page-top should shift to left: 50px

Files to modify: src/styles.scss (add .menu-collapsed rules), or src/app/theme/components/sidebar/sidebar.component.scss and src/app/theme/components/page-top/page-top.component.scss (add dynamic class bindings).

---

Was this helpful? React with 👍 or 👎 to provide feedback.

[devin-ai-integration]

Fixed — added .menu-collapsed rules in global styles.scss that shrink .al-sidebar to 50px, hide text labels/submenu arrows/sublists, and shift .page-top left to 50px. This mirrors the original AngularJS SASS rules that were missing. See 03baa23.