angular_migration/react-bootstrap-migration/task_list.md

Task List: Angular to React Migration

This document tracks the tasks for migrating the Angular Clarity application to React with Bootstrap.

Phase 1: Project Setup & Core Infrastructure

• Task 1: Initialize React Project
  • Use create-react-app or Vite to set up the project structure.
  • Create initial package.json.
  • Create placeholder index.html and App.js.
• Task 2: Install Dependencies
  • npm install bootstrap react-bootstrap
  • npm install react-router-dom
  • npm install axios
• Task 3: Setup Project Folder Structure
  • Create directories for components, pages, hooks, services, contexts, utils.
• Task 4: Implement Routing
  • Set up BrowserRouter in index.js.
  • Create a main routing component (AppRoutes.js) to define public and private routes.
• Task 5: Authentication & State Management
  • Create AuthContext to manage user session and info, replacing UserInfoService.
  • Implement useAuth hook.
• Task 6: API Service Layer
  • Create a generic useApi hook or an API client singleton (e.g., api.js using axios) to handle requests, replacing ApiRequestService.

Phase 2: Feature Migration (Module by Module)

Admin Module

• Task 7: User Registration (user-registration.component.ts)
  • Create UserRegistration.js page/component.
  • Build the form using react-bootstrap components.
  • Implement form state and validation (e.g., with useState or react-hook-form).
  • Connect to the backend API using the API service layer.
• Task 8: Password Reset (password-reset.component.ts)
  • Create PasswordReset.js page/component.
  • ... (similar sub-tasks as above)
• Task 9: Menu Group (edit-menu-group.component.ts)
  • Create EditMenuGroupPage.js component.
  • Translate Angular template to React with react-bootstrap.
  • Replicate component state and handlers.
  • Create corresponding CSS and import it.
  • Handle inconsistency in source HTML by matching table to headers.
• ... More admin components to be listed here ...

Builder Module

• Task 10: Dashboard (dashboardnew.component.ts)
  • Create Dashboard.js page.
  • Migrate line-chart.component to a React chart component (using a library like Chart.js or Recharts).
• ... More builder components to be listed here ...

FND Module

• ... FND module components to be listed here ...

Phase 3: Finalization

• Task 99: Final Review & Cleanup
  • Code review all migrated components.
  • Remove dead code.
• Task 100: Documentation
  • Create analysis_report.md.
  • Create task_list.md.
  • Write final instruction.md with setup and usage instructions.