✏️ Update Student View Page – Add Edit (Pencil) Icon for Admin Access Only

[abhishek-nexgen-dev]

✏️ Admin Inline Edit Feature for Student View Page

This feature allows admin users to update student information directly from the Student View Page using an inline edit interface. No modals or new pages are needed — editing happens in-place for a fast and smooth admin experience.

---

🔗 Frontend Location

• Page URL: https://www.growrichmindset.in/admin/Students
• Access: 🔐 Protected route – only accessible to authenticated admin users.

---

🎯 Feature Overview

🎨 UI Changes

• A pencil icon (✏️) is displayed to each student’s record in the Form Title.
• When an admin clicks this icon:
  • That specific row (or card) enters "edit mode".
  • Text fields (like name, email, phone, etc.) become editable.
  • A "Save" button and a "Cancel" button are shown.
• After editing, the admin can:
  • Click Save to submit the changes.
  • Click Cancel to discard any changes and exit edit mode.

---

🧪 Example Use Case

1. Admin logs into the dashboard and visits the Student View Page.
2. A pencil icon is visible next to each student.
3. Admin clicks the pencil icon next to a student named "John Doe".
4. The row switches to edit mode, and admin updates the email and phone number.
5. Admin clicks Save.
6. The updated data is sent to the backend via an API call.
7. Upon success:
   • A success message is shown (e.g., "Student updated successfully").
   • The row switches back to view mode with the new data visible.

---

🔁 Backend API Integration

➤ Endpoint

• URL: /api/v1/student/update
• Method: POST
• Access: Protected – only for authenticated admin users

➤ Expected Payload

{
  "studentId": "12345",
  "name": "Updated Name",
  "email": "updated.email@example.com",
  "phone": "9876543210"
}

➤ Success Response

{
  "success": true,
  "message": "Student updated successfully"
}

✅ Feature Requirements

This section outlines all the required functionality and behavior for the inline student editing feature. These items must be completed for the feature to be considered done.

🔓 Access Control

• The Student View Page must be accessible only to logged-in admin users.
• The pencil icon (✏️) must be visible only for authenticated admins.

---

🖱️ UI Behavior

• Each student record must show a pencil icon in an actions column or next to the data.
• When the admin clicks the pencil icon:
  • The selected row or section enters inline edit mode.
  • Editable fields (e.g., Name, Email, Phone) turn into input fields.
  • Show Save and Cancel buttons for that row.
• The Cancel button should:
  • Discard any unsaved changes.
  • Return the row to view-only mode.

---

💾 Data Handling

• When the Save button is clicked:
  • The updated data must be sent to the backend API: POST /api/v1/student/update.
  • Include the necessary student ID and all updated fields in the request payload.

---

✅ API Response Handling

• On a successful update:
  • Show a confirmation message (e.g., "Student updated successfully").
  • Exit edit mode and display the updated data in view mode.
• On an error:
  • Show a clear error message (e.g., "Failed to update student").
  • Do not exit edit mode unless Cancel is clicked.

---

🔄 UI Refresh

• After a successful save, refresh only the edited row, not the entire page.
• Optionally, highlight the updated row briefly to confirm success to the admin.

---

🛡️ Security & Validation

• Ensure the API is protected – only authenticated admins can call /api/v1/student/update.
• Perform input validation both on the frontend (optional) and backend (required):
  • Email format must be valid.
  • Phone number must meet expected criteria.
• Prevent unauthorized or unauthenticated users from accessing edit functionality.

---

This checklist ensures that the feature works smoothly, securely, and improves admin productivity when managing student records.

[tharani-2006]

Hi, I would like to work on this issue. Could you please assign it to me?

[abhishek-nexgen-dev]

@tharani-2006 Sure Complete this with in 2 Day