# 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

- [x] **Task 1: Initialize React Project**
  - [x] Use `create-react-app` or Vite to set up the project structure.
  - [x] Create initial `package.json`.
  - [x] Create placeholder `index.html` and `App.js`.
- [ ] **Task 2: Install Dependencies**
  - [ ] `npm install bootstrap react-bootstrap`
  - [ ] `npm install react-router-dom`
  - [ ] `npm install axios`
- [x] **Task 3: Setup Project Folder Structure**
  - [x] Create directories for `components`, `pages`, `hooks`, `services`, `contexts`, `utils`.
- [x] **Task 4: Implement Routing**
  - [x] Set up `BrowserRouter` in `index.js`.
  - [x] 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)
- [x] **Task 9: Menu Group (`edit-menu-group.component.ts`)**
  - [x] Create `EditMenuGroupPage.js` component.
  - [x] Translate Angular template to React with react-bootstrap.
  - [x] Replicate component state and handlers.
  - [x] Create corresponding CSS and import it.
  - [x] 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**
  - [x] Create `analysis_report.md`.
  - [x] Create `task_list.md`.
  - [ ] Write final `instruction.md` with setup and usage instructions.