[DMP 2026]: Helpline1097-UI - Angular 4 to Angular 19 + Zard UI Migration

[drtechie]

Description

Migrate the Helpline1097-UI application from Angular 4.4.4 to Angular 19 with Zard UI (shadcn for Angular) as the component library. The current codebase uses deprecated Angular Material 2.0.0-beta.11, @angular/http, RxJS 5, and Bootstrap 3, all of which are end-of-life. A fresh scaffold + module-by-module port is recommended over incremental upgrades since every file must change regardless.

Current state: Angular 4.4.4 | 96 components | 42 services | 14 directives | Monolithic AppModule (118 declarations, 72 providers, 17 entryComponents)

Note on AI-assisted development: A project of this scale is not achievable through manual coding alone within the expected timeline. Contributors will be provided a Claude Code Pro/Max subscription to accelerate development using AI agentic coding. Understanding how to work effectively with AI coding agents and copiloting is an important skill for this project. That said, this is not a vibe coding project. Contributors must understand the architecture and review all AI-generated code critically rather than blindly trusting the output. The existing repository serves as the reference point to ensure all functionality is preserved.

Goals & Mid-Point Milestone

• Scaffold Angular 19 project with Zard UI, Tailwind CSS v4, and standalone component architecture
• Rewrite HTTP layer: replace deprecated @angular/http with @angular/common/http functional interceptors
• Port all 42 services (mechanical: Http -> HttpClient, RxJS 5 -> 7 operators)
• Port core infrastructure: auth guards, session storage, config service, Czentrix integration
• Port shared components: 14 directives, pipes, common dialog, loader
• Port authentication flow (login -> captcha -> role selection -> dashboard)
• Mid-point milestone: Core infrastructure + auth flow + dashboard + CO services functional against existing backend
• Port beneficiary registration (1,827 lines, needs decomposition), call management, and CO services
• Port supervisor module: grievance, reports, alerts, training resources, emergency contacts
• Port Everwell integration components (worklist, guidelines upload)
• Replace all Angular Material beta / md2 components with Zard UI equivalents
• Replace Bootstrap 3 with Tailwind CSS v4

Setup/Installation

• AMRIT Setup Guide
• Existing project: git clone https://github.com/PSMRI/Helpline1097-UI.git
• New scaffold: ng new helpline1097-ui --style=scss --routing=true --standalone && npx @ngzard/ui init

Expected Outcome

A fully functional Helpline1097-UI application on Angular 19 with:

• Modern standalone component architecture (no monolithic NgModule)
• Zard UI component library replacing all Angular Material beta and md2 components
• Tailwind CSS v4 replacing Bootstrap 3
• Lazy-loaded feature modules for optimal performance
• All existing functionality preserved with the same API endpoints and user workflows
• Production build succeeds and deploys via existing WAR packaging pipeline

Acceptance Criteria

• All 96 components ported and functional
• All 42 services communicate correctly with existing backend APIs
• Login -> role selection -> dashboard -> call handling -> closure flow works end-to-end
• Czentrix telephony integration functional
• Everwell integration components working
• No references to @angular/http, @angular/material beta, Bootstrap 3, md2, or RxJS 5 remain
• ng build --configuration=production succeeds with no errors
• WAR packaging via pom.xml works for deployment
• All form validations (14 directives) work correctly
• Socket.io upgraded to 4.x, xlsx and d3 upgraded

Implementation Details

• Approach: Fresh Angular 19 scaffold, port code module-by-module (not incremental 4->5->...->19)
• UI Library: Zard UI (shadcn philosophy) replacing Material beta + md2
• CSS: Tailwind CSS v4 replacing Bootstrap 3
• Module System: Standalone components with lazy-loaded routes (no NgModule)
• HTTP: Functional HttpInterceptorFn replacing class-based interceptors
• Guards: Functional CanActivateFn replacing class-based guards
• RxJS: Pipe operators replacing prototype patching
• Dependencies to remove: jQuery, Bootstrap JS, angular2-toaster, ng2-smart-table, md2, jspdf (replace with modern alternative)
• Dependencies to upgrade: socket.io-client 2->4, d3 4->7, xlsx 0.13->0.20, moment -> date-fns
• Key integration: Czentrix telephony service (czentrix.service.ts) must be carefully ported
• Key risk: Beneficiary registration (1,827 lines) and innerpage (1,105 lines) need decomposition

Mockups/Wireframes

N/A. UI should match existing application screens with modernized Zard UI styling.

Product Name

Helpline1097-UI

Organisation Name

Piramal Swasthya Management and Research Institute

Domain

Healthcare

Tech Skills Needed

• Angular
• TypeScript
• Tailwind CSS
• RxJS
• RESTful APIs
• HTML
• WebSockets
• AI Agentic Coding
• Refactoring

Mentor(s)

@drtechie

Category

• Frontend
• Refactoring
• Performance Improvement

[drtechie]

This is a Dedicated Mentoring Program (DMP) ticket under C4GT. Applications will be accepted through proposals via C4GT, and assignees will be added through due process. Please refrain from spamming.