feat: Implement EditMenuGroupPage with form and mock data

Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>

react-bootstrap-migration/logs/task_9_edit_menu_group.log

@@ -0,0 +1,10 @@
+[2025-07-18] Starting task: Task 9: Menu Group (`edit-menu-group.component.ts`)
+[2025-07-18] Analysis: Angular component logic is mostly commented out. HTML has inconsistencies between table headers and body.
+[2025-07-18] Decision: Proceeding with migration by creating a React component that matches the table headers and uses mock data.
+[2025-07-18] Action: Replacing placeholder `react-bootstrap-migration/src/pages/admin/EditMenuGroupPage.js` with a full component implementation.
+[2025-07-18] Action: Using react-bootstrap components (Form, Table, Button, etc.) to build the UI.
+[2025-07-18] Action: Using `useState` and `useEffect` for state management and data mocking.
+[2025-07-18] Action: Creating `react-bootstrap-migration/src/pages/admin/EditMenuGroupPage.css` with styles converted from SCSS.
+[2025-07-18] Action: Updating `task_list.md` to reflect progress.
+[2025-07-18] Status: SUCCESS - Initial migration of EditMenuGroupComponent is complete. The component is now a static form with mock data.
+[2025-07-18] Next: Integrate with live APIs by creating a `useApi` hook or similar service layer.

react-bootstrap-migration/src/pages/admin/EditMenuGroupPage.css

@@ -0,0 +1,39 @@
+.center {
+    text-align: center;
+}
+
+.section {
+    background-color: #f7f7f7;
+    border: 1px solid #dee2e6;
+    border-bottom: none;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    margin-top: 1.5rem;
+    border-top-left-radius: 0.25rem;
+    border-top-right-radius: 0.25rem;
+}
+
+.section p {
+    padding: 0 1rem;
+    font-size: 1.1rem;
+    font-weight: 500;
+    margin: 0;
+}
+
+#lines input,
+#lines select {
+    border: none;
+    background-color: transparent;
+    padding-left: 0;
+    padding-right: 0;
+}
+
+#lines input:focus,
+#lines select:focus {
+    box-shadow: none;
+}
+
+#lines .form-check-input {
+    border: 1px solid #dee2e6;
+}

react-bootstrap-migration/src/pages/admin/EditMenuGroupPage.js

@@ -0,0 +1,151 @@
+import React, { useState, useEffect } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { Form, Button, Container, Row, Col, Table, FloatingLabel } from 'react-bootstrap';
+import './EditMenuGroupPage.css';
+
+const EditMenuGroupPage = () => {
+    const { id } = useParams();
+    const navigate = useNavigate();
+
+    // Mock data based on Angular component analysis
+    const [header, setHeader] = useState({
+        menu_name: '',
+        description: '',
+        active: true,
+        start_date: '',
+        end_date: '',
+    });
+
+    const [lines, setLines] = useState([]);
+    const types = ['user', 'admin', 'mis report', 'bi report'];
+    const [menuDropDown, setMenuDropDown] = useState([]); // Mocked menu items for dropdown
+
+    useEffect(() => {
+        // Mock fetching data since services are commented out in Angular component
+        console.log("Fetching data for menu group with id:", id);
+        setHeader({
+            menu_name: 'Admin Menu Group',
+            description: 'Main administrative menu group.',
+            active: true,
+            start_date: '2025-01-01',
+            end_date: '2025-12-31',
+        });
+        setLines([
+            { id: 1, name: 'User Management', type: 'admin', menu_id: '101', active: true, start_date: '2025-01-01', end_date: '2025-12-31', seq: 10 },
+            { id: 2, name: 'System Reports', type: 'mis report', menu_id: '102', active: false, start_date: '2025-01-01', end_date: '2025-06-30', seq: 20 },
+        ]);
+        setMenuDropDown([
+            { id: '101', name: 'User Admin Menu' },
+            { id: '102', name: 'Reporting Menu' },
+        ]);
+    }, [id]);
+
+    const handleHeaderChange = (e) => {
+        const { name, value, type, checked } = e.target;
+        setHeader(prev => ({ ...prev, [name]: type === 'checkbox' ? checked : value }));
+    };
+
+    const handleLineChange = (index, e) => {
+        const { name, value, type, checked } = e.target;
+        const newLines = [...lines];
+        newLines[index] = { ...newLines[index], [name]: type === 'checkbox' ? checked : value };
+        setLines(newLines);
+    };
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        console.log("Submitting data:", { id, header, lines });
+        // Mock navigation on successful update
+        navigate('/admin/menu-group/all'); // A hypothetical route
+    };
+    
+    const back = () => {
+        navigate(-1); // Go back to the previous page
+    }
+
+    return (
+        <Container>
+            <h3 className="center"><b>Menu Group Edit Form</b></h3>
+            <p>ID: {id}</p>
+            <hr />
+
+            <Form onSubmit={handleSubmit}>
+                <div className="section">
+                    <p>Menu Group Header</p>
+                </div>
+                <Row className="mb-3">
+                    <Form.Group as={Col} md="4">
+                        <FloatingLabel label="Menu Name">
+                            <Form.Control type="text" name="menu_name" value={header.menu_name} onChange={handleHeaderChange} placeholder="Enter Menu Name" />
+                        </FloatingLabel>
+                    </Form.Group>
+                    <Form.Group as={Col} md="4">
+                        <FloatingLabel label="Menu Description">
+                            <Form.Control type="text" name="description" value={header.description} onChange={handleHeaderChange} placeholder="Enter Menu Description" />
+                        </FloatingLabel>
+                    </Form.Group>
+                    <Form.Group as={Col} md="4" className="d-flex align-items-center">
+                         <Form.Check type="switch" id="header-active" name="active" label="Active" checked={header.active} onChange={handleHeaderChange} />
+                    </Form.Group>
+                </Row>
+                <Row className="mb-3">
+                    <Form.Group as={Col} md="4">
+                        <FloatingLabel label="Start Date">
+                            <Form.Control type="date" name="start_date" value={header.start_date} onChange={handleHeaderChange} />
+                        </FloatingLabel>
+                    </Form.Group>
+                     <Form.Group as={Col} md="4">
+                        <FloatingLabel label="End Date">
+                            <Form.Control type="date" name="end_date" value={header.end_date} onChange={handleHeaderChange} />
+                        </FloatingLabel>
+                    </Form.Group>
+                </Row>
+
+                <div className="section">
+                    <p>Menu Group Lines Details</p>
+                </div>
+                <Table striped bordered hover responsive id="lines">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Type</th>
+                            <th>Menu Name</th>
+                            <th>Active</th>
+                            <th>Start Date</th>
+                            <th>End Date</th>
+                            <th>Order</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {lines.map((line, index) => (
+                            <tr key={line.id}>
+                                <td><Form.Control type="text" name="name" value={line.name} onChange={(e) => handleLineChange(index, e)} /></td>
+                                <td>
+                                    <Form.Select name="type" value={line.type} onChange={(e) => handleLineChange(index, e)}>
+                                        <option>Choose Type</option>
+                                        {types.map(t => <option key={t} value={t}>{t}</option>)}
+                                    </Form.Select>
+                                </td>
+                                <td>
+                                    <Form.Select name="menu_id" value={line.menu_id} onChange={(e) => handleLineChange(index, e)}>
+                                        <option>Choose Menu</option>
+                                        {menuDropDown.map(m => <option key={m.id} value={m.id}>{m.name}</option>)}
+                                    </Form.Select>
+                                </td>
+                                <td className="text-center align-middle"><Form.Check type="switch" name="active" checked={line.active} onChange={(e) => handleLineChange(index, e)} /></td>
+                                <td><Form.Control type="date" name="start_date" value={line.start_date} onChange={(e) => handleLineChange(index, e)} /></td>
+                                <td><Form.Control type="date" name="end_date" value={line.end_date} onChange={(e) => handleLineChange(index, e)} /></td>
+                                <td><Form.Control type="number" name="seq" value={line.seq} onChange={(e) => handleLineChange(index, e)} /></td>
+                            </tr>
+                        ))}
+                    </tbody>
+                </Table>
+                
+                <Button variant="secondary" onClick={back} className="me-2">Back</Button>
+                <Button type="submit" variant="primary">UPDATE</Button>
+            </Form>
+        </Container>
+    );
+};
+
+export default EditMenuGroupPage;

react-bootstrap-migration/task_list.md

@@ -0,0 +1,65 @@
+# 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.