Sphurthy taking over for Taariq: Adding a Lesson Plan Builder UI and update routes

[TaariqMansurie]

Description

This PR adds the UI and API integration for the "Assign Lesson Plan" feature. Educators and admins can assign tasks to students manually via a button or automatically upon saving.

Implements # (PRIORITY HIGH) Phase 4 - Assign Lesson Plan - Front end and UI (WIP Taariq)

Related PRS (if any):

This frontend PR is related to the backend PR 2145
To test this frontend PR, you need to have the corresponding backend branch running locally.
…

Main changes explained:

• Create LessonPlanBuilder.jsx for the main builder UI and API fetch logic.
• Create LessonPlanBuilder.module.css for component styling.
• Create AssignLessonPlanModal.jsx for the confirmation modal.
• Update src/routes.jsx to include the new route for the Lesson Plan Builder.
  …

How to test:

1.check into current branch
2. do yarn install and yarn start to run this PR locally
3. Clear site data/cache
4. log in as an admin or educator user
5. go to the Lesson Plan Builder page
6. verify manual assignment: Click "Assign Lesson Plan", click "Confirm" in the modal, and verify the notification appears.
7. verify auto assignment: Click "Save Lesson Plan" and verify the UI updates with the "Auto-assigned at [Time]" status.

Screenshots or videos of changes:

Note:

Include the information the reviewers need to know.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	71039cd
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/69e6c720a7972d00084aa2a3
😎 Deploy Preview	https://deploy-preview-4978--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[sonarqubecloud]

Quality Gate passed

Issues
84 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[ManojPuttaswamy]

I tried testing the functionalities by switching to "taariq-feature-lesson-plan-builder-frontend", but I see POST /api/educator/assign-tasks return 404 error. Not sure if I have to have any records in the database prior to testing.

[ManojPuttaswamy]

please cleanup comments which aren't necessary

[Anusha-Gali]

Hi Taariq,

I have reviewed your PR locally and have found the below issue:

• The UI of the manually assigned and auto assigned does not show the pop of color as it does in light mode
• The calendar is in light mode when the application is in dark mode
• As you can see in the below video, there is a huge delay in terms of notification pop up which can cause people to assume that it did not get clicked and they can click it multiple times just like i did and the notification appears multiple times
• Also what exactly does 1404 mean in the notification.
• And the UI is not mobile responsive

4978.mov

[sonarqubecloud]

Quality Gate passed

Issues
88 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[HemanthNidamanuru]

Hey Sphurthy,

Great work on the improvements! The calendar dark mode, notification delay, notification message, and mobile responsiveness are all fixed.

Two things left to fix:

1. The manually assigned and auto-assigned UI does not show the color highlight in dark mode like it does in light mode.
2. The Duplicate button text is not aligned properly

[kunchalasireesha]

Hi Spurthy, it looks like this PR currently has merge conflicts with the base branch. Could you please rebase or merge the latest changes from development into your branch and resolve the conflicts? Once the build passes, I’ll finish the review.

[DeepighaJ]

Checked into current branch and tested PR locally
Adding assignments and Assign Lesson plan on confirm works as expected with notifications.
Save Lesson Plan with notification and Auto-assigned at time status also works as expected.
Issues: There are some UI inconsistencies.

• The calendar icon inside the Due Date field appears cramped and too close to the text (05/27/).
• The Duplicate buttons are larger than the Select buttons and dominate the row visually.
• There is excessive blank space between the last subtask row and the Total section.
• The Add subtask and Assign Lesson Plan buttons alignment is not good

[amaresh2001]

Tested locally on branch: taariq-feature-lesson-plan-builder-frontend
with Backend: sphurthy-merged-1813-2098

Testing:

• Lesson Plan Builder page loads correctly at /educationPortal/LessonPlans
• Add subtask, Duplicate, and Delete row functions work correctly
• Manual assignment: "Assign Lesson Plan" → Confirm modal → "Assigning tasks..." notification works as expected
• Auto assignment: "Save Lesson Plan" shows "Auto-assigned at [Time]" status correctly
• Dark mode: all elements render correctly

Issues:
The Due Date field is visually cramped. Once a date is selected, the date text overflows or gets clipped within the column width. The column may need to be slightly wider, or the date format adjusted to display cleanly.

Blocking issue:
This PR has active merge conflicts that must be resolved before it can be merged.

[Mahitha-pasupuleti]

Hi Sphurthy,

I tested both the manual and automatic lesson plan assignment flows.

1. For the "Assign Lesson Plan" action, after clicking Confirm, a brief "Assigning Tasks" notification appeared but disappeared very quickly.

2. The same behavior occurred when testing "Save Lesson Plan". The notification appeared briefly, but the expected status update was not displayed afterward. After the process completed, I did not observe the expected "Auto-assigned at [Time]" status update.