# 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.