Sriamsh - Improve Daily Equipment Log User Experience

[Sriamshreddy000]

Description

Related PRS (if any):

This frontend PR is related to the backend development branch.

Main changes explained:

• Improved the Daily Equipment Log user experience by adding a clear confirmation step before submitting equipment log updates to prevent accidental changes.
• Added visible user feedback after a successful submission so users know when an entry has been recorded.
• Refactored the submit flow to separate user intent (submit) from execution (confirm), improving clarity and maintainability.
• Made minor UI adjustments to ensure the confirmation banner integrates cleanly with the existing layout across screen sizes.

How to test:

1. check into current branch
2. do npm install and npm start to run this PR locally
3. Clear site data/cache
4. log as admin user
5. Navigate to Dashboard → Equipment → Daily Equipment Log
6. Select a date and project, choose a log type (Check In or Check Out) then select one or more equipment items and click Submit, then verify the entry is submitted and also verify if a confirmation prompt appears.
7. Click Cancel and confirm no update is made.
8. Refresh the page and confirm data consistency.
9. verify this new feature works in dark mode

Screenshots or videos of changes:

Note:

• This PR focuses on UX improvements only and does not introduce backend or database changes.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	2e0cb8e
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/69a2a0c33288510008ae9ad7
😎 Deploy Preview	https://deploy-preview-4701--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
3 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

[sayali-2308]

The core functionality works perfectly, but there's a CSS issue in dark mode that needs to be addressed before approval.

What Works Well:

1. Confirmation Prompt: Yellow banner appears correctly with "Are you sure? This will update equipment availability." message and Cancel/Confirm buttons
2. Success Notification: Green "Equipment logs updated successfully!" message displays after confirmation
3. Cancel Functionality: Cancel button properly prevents updates
4. Data Persistence: Data survives page refresh correctly
5. UX Flow: Clear separation between user intent (submit) and execution (confirm)
6. No Console Errors: Clean console in both light and dark modes

Issues Found - Dark Mode:
Project Dropdown and Confirmation Prompt text CSS Issue:

• The Project dropdown field appears with white/light background in dark mode
• Makes the dropdown difficult to read and doesn't integrate cleanly with dark mode theme
• This conflicts with the PR requirement: "Made minor UI adjustments to ensure the confirmation banner integrates cleanly with the existing layout"

[Anusha-Gali]

Hi Sriamsh,

I have reviewed your PR locally and though the functionality works as per requirement on confirm and cancel as well as refresh. The only issue is the banner is not visible in clearly in dark mode.
Issue

Working functionality

[rohanrastogi311]

Hi Sriamsh,

Wel done with this implementation. Needs dark mode corrections.

[Sriamshreddy000]

Issues Found - Dark Mode: Project Dropdown and Confirmation Prompt text CSS Issue:

• The Project dropdown field appears with white/light background in dark mode
• Makes the dropdown difficult to read and doesn't integrate cleanly with dark mode theme
• This conflicts with the PR requirement: "Made minor UI adjustments to ensure the confirmation banner integrates cleanly with the existing layout"

Hi Sriamsh,

I have reviewed your PR locally and though the functionality works as per requirement on confirm and cancel as well as refresh. The only issue is the banner is not visible in clearly in dark mode.

Hi Sriamsh,

Wel done with this implementation. Needs dark mode corrections.

Fixed the dark mode styling issue for the confirmation banner. It should now display correctly with proper contrast and visibility in dark mode.

[rohanrastogi311]

Hi Sriamsh,

Thanks for working on this. The dark mode for the drop downs is still not implemented correctly.

[Anusha-Gali]

Hi Sriamsh,

I have reviewed your PR locally and thank you for fixing the banner. The dark mode issue mentioned by other reviewers does exist in your PR however the exact page is well adapted to dark mode in "Dev", so i suppose pulling the latest Dev and updating the local should help before merge.

[sonarqubecloud]

Quality Gate passed

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