angular_migration/react-bootstrap-migration/task_list.md

Task List: Angular Clarity to React+Bootstrap Migration

This document tracks the tasks required to migrate the application from Angular/Clarity to React/Bootstrap.

Phase 1: Project Setup & Core Implementation

• Task 1: Initialize React Project
  • Use Vite to create a new React project with the TypeScript template.
  • Name the project react-bootstrap-migration.
• Task 2: Install Dependencies
  • Install react-router-dom for routing.
  • Install bootstrap and react-bootstrap.
  • Install axios for HTTP requests.
  • Install sass for styling.
• Task 3: Setup Project Structure
  • Create directories: src/components, src/hooks, src/contexts, src/services, src/pages, src/types, src/styles.
• Task 4: Implement Core Configuration
  • Create a config.ts to replace AppConfig.
• Task 5: Implement API Client
  • Create an axios instance to replace ApiRequestService.
  • Implement interceptors for adding auth tokens and handling errors.
• Task 6: Implement Auth Context
  • Create an AuthContext to manage user state, replacing UserInfoService.
  • Implement login, logout, and session persistence logic.
• Task 7: Implement Notification System
  • Create a NotificationContext and component to replace AlertService. Use react-bootstrap Toasts or Alerts.

Phase 2: Feature Migration

Authentication

• Task 8: Setup Routing
  • Configure react-router-dom with public and private routes.
• Task 9: Migrate Login Page
  • Create a LoginPage component.
  • Convert login form and logic from LoginService.
• Task 10: Migrate User Registration
  • Create a UserRegistrationPage component.
  • Convert UserRegistrationComponent logic and UserRegistrationService calls.
• Task 11: Migrate Password Reset
  • Create a PasswordResetPage component.
  • Convert PasswordResetComponent logic and ForgotpassService calls.

Admin Module

• Task 12: Migrate Menu Group Feature
  • Create EditMenuGroup and ReadOnlyMenuGroup components.
  • Re-implement logic from MenuGroupService.
• Task 13: Migrate User Maintenance
  • Create user list and edit components.
  • Re-implement logic from UsermaintanceService.
• ...(other admin features)

Builder Module

• Task 14: Migrate Dashboard
  • Create Dashboard page.
  • Convert DashboardnewComponent.
• Task 15: Migrate Line Chart Gadget
  • Create LineChart component using a library like react-chartjs-2 or recharts.
  • Convert data fetching logic.
• ...(other builder features)

FND Module

• Task 16: Migrate API Registry
  • Create components for addapiregistery and editapiregistery.
• ...(other fnd features)

Phase 3: Finalization

• Task 17: Review and Refactor
  • Code review all migrated components and hooks.
  • Ensure consistent coding style and best practices.
• Task 18: Finalize Styling
  • Perform a full UI review to ensure Bootstrap is applied correctly.
  • Fix any styling inconsistencies.
• Task 19: Create Documentation
  • Write instruction.md with detailed setup, build, and run instructions.
  • Update analysis_report.md with any findings during migration.
• Task 20: Final Deliverable Packaging
  • Ensure all logs, reports, and the final project are organized.