Bosu taking over for Manvitha - Phase 4 Student Daily Log Frontend

[myeeli]

Description

Related PRS (if any):

This frontend PR is related to the development backend PR.
…

Main changes explained:

…

How to test:

1. check into current branch
2. do npm install and ... to run this PR locally
3. Clear site data/cache
4. log as any user
5. go to localhost:5173/educationportal/dailylog

Screenshots or videos of changes:

1.mp4

Note:

The data which is used here is mock data. API yet to be integrated

Jwt-Decode version should be 4.0.0 to do that do npm install jwt-decode@4

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	da3b55a
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/694647534064e7000887e60a
😎 Deploy Preview	https://deploy-preview-4225--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 failed

Failed conditions
3 Security Hotspots

See analysis details on SonarQube Cloud

[Anusha-Gali]

Hi Manvitha,

I have tried to review your PR locally but i am unable to sign in nor open that link in an already signed in page. You can see this in the below video as well.

4225.mp4

[VijayAnirudh]

Hello!

I cannot view your page, its just white!
After that, opened in other browser and I cannot login!

[sonarqubecloud]

Quality Gate passed

Issues
0 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

[myeeli]

Hi Manvitha,

I have tried to review your PR locally but i am unable to sign in nor open that link in an already signed in page. You can see this in the below video as well.

4225.mp4

Please verify the jwtdecode version added in the note

[myeeli]

Hello!

I cannot view your page, its just white! After that, opened in other browser and I cannot login!

Please verify the jwtdecode version added in the note

[rohanrastogi311]

Hi Manvitha,

I installed jwt 4 like your notes say but still wasn't able to run the code. Please have a look and let me know to re-review.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	c427ce8
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6a6934354dca330008529ad8
😎 Deploy Preview	https://deploy-preview-4225--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

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

DISMISSED: All issues raised have been resolved in the latest commits.

Fixes applied:

• Resolved all merge conflicts with development branch (package.json, routes.jsx, login components)
• Fixed jwt-decode v4 compatibility: updated all imports from default to named exports (import { jwtDecode }) and updated all test mocks accordingly
• Fixed null-check bugs in EPLogin, CPLogin, and KitchenandInventoryLogin components
• All ESLint errors resolved (0 errors)
• All unit tests passing (313/313 test files, 0 failures)
• Build verified passing

The login/white-screen issues were caused by jwt-decode v4 breaking changes and merge conflicts, which are now fully resolved.

[SharadhaKasiviswanathan]

Issues Resolved

Author: SharadhaKasiviswanathan (taking over for Manvitha)

What was fixed:

1. Merge Conflicts Resolved (6 files)

• package.json — kept jwt-decode v4, accepted dev's jspdf v4 + jspdf-autotable
• CPLogin.jsx — accepted dev's improved null checks
• EPLogin.jsx — accepted dev's null checks
• UserSkillsProfile.jsx — removed duplicate imports
• routes.jsx — merged daily log routes with dev's education portal routes
• yarn.lock — regenerated from dev

2. ESLint Fixed (3 errors → 0)

• Updated jwt-decode imports from default to named exports (import { jwtDecode }) in UserSkillsProfile, authInit.test.js, authActions.js.test.js

3. Unit Tests Fixed (9 failures → 0)

• Updated jwt-decode mocks from default to named jwtDecode export in 5 test files
• Fixed null-check bug

4. Build: Verified passing

Local Verification Results:

• npm run lint — 0 errors (259 warnings only)
• npm run test — 313/313 test files passing
• npm run build — successful

Note:

The login/white-screen issues reported by reviewers were caused by jwt-decode v4 breaking changes (named vs default export) combined with merge conflicts. All root causes have been identified and resolved.

[HemanthNidamanuru]

Hi Sharadha,

I tested this PR locally. The Daily Log page is working overall, but I was unclear about part of the workflow.

After submitting a log and adding notes to the teacher, the Save and Cancel buttons do not appear to work. When returning to the Daily Log page, the submitted entry is also not displayed. Could you please confirm whether this is the intended behavior?

As a usability suggestion, dropdowns may be better than text fields for selecting the duration.

PR.4225.mov

[SharadhaKasiviswanathan]

I have addressed all the issues:

Fixes applied:

1. Save/Cancel buttons now work - Created a shared so that notes to the teacher persist when navigating back from the detail page. The Save button now also shows a green success confirmation after saving.

2. Submitted entries now display on return - The same context shares log state between and , so new entries persist after navigating away and returning.

3. Duration field changed to dropdowns - Replaced the free-text duration input with hour (0-12h) and minute (0/15/30/45m) select dropdowns for better usability, as suggested but unable to access the video recording.

Also fixed: jwt-decode v4 mock in (was using auto-mock which doesn't handle named exports).

All tests passing (2104/2104), 0 lint errors

[kzou55]

Hi Sharadha,

I ran and tested the PR locally.

Verified

• Users Can add new time long consisting of course, duration(hrs and minutes) and notes
• Users can click view on a time long and add a note
  • Cancel button reverts the note back to its last saved state
  • Save button saves the current note and shows the message "Note saved successfully."
• Functionality works in Dark Mode

Recording.2026-07-17.140416.mp4

Issues

1. Not sure if this is within scope of the PR, but Dark Mode needs improvement. Only the main background component has Dark Mode applied to it.

[HemanthNidamanuru]

Hi Sharadha,

Thank you for working on the improvements. The Daily Log page and the updated workflow are working as expected.

I noticed one minor issue: the page content is not properly aligned in dark mode. Please review the alignment when you get a chance.

[akv-iu]

Tested this PR locally.

Verified:

-Adding a new time log with course, duration (hours and minutes), and notes works
-Clicking "View" on a time log and adding a note works
-Cancel reverts the note to its last saved state
-Save persists the note and shows "Note saved successfully."
-Functionality works correctly in dark mode
Issue:
-Dark mode styling is broken on this page. Screenshot attached. Functionality is unaffected, this is a visual bug only.

[sonarqubecloud]

Quality Gate passed

Issues
6 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

[BosuBose132]

Description

Implements and completes the Phase 4 Student Daily Log frontend functionality.

This takeover resolves the remaining functional and visual defects in the Student Daily Log workflow, including incorrect duration totals, weekly calculations, form validation, local persistence, teacher-note handling, and dark-mode button visibility.

No backend changes are required for this PR. The Daily Log currently uses frontend mock data with user-scoped local storage.

Related PRs

None.

Main changes explained

1. Corrected duration parsing so hours and minutes are calculated accurately.
2. Corrected the “This Week” calculation so it only includes entries from the current week.
3. Added validation to prevent saving a 0h 0m time log.
4. Reset unsaved form values after Cancel and after a successful Save.
5. Added user-scoped local-storage persistence for time logs and teacher notes.
6. Added safe fallback behavior when stored local data is missing or malformed.
7. Kept time-log entries sorted chronologically after new entries are added.
8. Updated the teacher-note workflow:
   • Saved notes persist across navigation and page refresh.
   • Cancel restores the last saved note.
   • Save feedback resets when the note is edited again.
9. Added dark-mode styling for the Daily Log and Time Log Detail pages.
10. Corrected dark-mode contrast for New Time Log, Save, Cancel, View, and related action-button states.
11. Added focused regression tests covering the primary defect and edge cases.

How to test

1. Check out the frontend branch:

   Manvitha-Phase4-Daily-Log

2. Install dependencies:

   npm install

3. Start the frontend:

   npm run start:local

4. Start the HGNRest backend from its latest development branch.

5. Log in using the available development test account.

6. Open:

   http://localhost:5173/educationportal/dailylog

7. Verify the seeded entries total 4h 45m.

8. Verify “This Week” displays 0h 0m when none of the seeded logs belong to the current week.

9. Create a new 1h 30m time log and verify:

   • The total increases by exactly 1 hour and 30 minutes.
   • The weekly total and entry count update correctly.
   • The new log appears in chronological order.
   • The entry remains after refreshing the browser.

10. Attempt to save a 0h 0m entry and verify:

    • A validation message appears.
    • No time log is created.
    • Existing totals remain unchanged.

11. Enter temporary form values, click Cancel, reopen the form, and verify the unsaved values were cleared.

12. Open a time-log detail page using the View button.

13. Save a teacher note and verify it persists after:

    • Returning to the Daily Log page.
    • Reopening the same entry.
    • Refreshing the browser.

14. Edit the saved teacher note, click Cancel, and verify the last saved value is restored.

15. Test light and dark modes and verify:

    • All text is readable.
    • Cards and form controls have appropriate contrast.
    • New Time Log, Save, Cancel, View, and Back buttons are readable.
    • Normal, hover, focus, active, and disabled states are visually clear.

16. Test the pages at desktop, tablet, and mobile widths.

17. Test user isolation by creating a recognizable entry under one account and confirming another account in the same browser does not see it.

18. Verify there are no new errors in the browser Console.

Automated verification

• Focused Daily Log tests: 9/9 passed
• ESLint: passed with zero errors and zero warnings
• Stylelint: passed with zero errors and zero warnings
• Production build: passed
• Git diff whitespace check: passed
• Pre-commit checks: passed

Screenshots or videos of changes

Attach the following evidence:

1. Daily Log page in light mode.
2. Daily Log page in dark mode.
3. New Time Log form showing the corrected action buttons.
4. Zero-duration validation message.
5. Time Log Detail page with teacher-note functionality.
6. A short video showing log creation, refresh persistence, note persistence, and dark mode.

Note

This is a frontend-only implementation. No package, lockfile, backend, or unrelated routing changes were included in the final defect-fix commit.