Chaitanya - Purchase request form enhancement

[csk731]

Description

Implements validation, feedback, and confirmation for the Purchase Request form. Addresses usability and reliability issues: required fields were unclear, invalid inputs had no inline errors, and users had no feedback during or after submission.

Improvements:

1. Required field indicators (Project, Material, Quantity, Priority)
2. Real-time Quantity validation (required, numeric, > 0) with inline errors
3. Per-field validation on blur with inline error messages
4. Form submission blocked until all required fields are valid
5. Loading/disabled state on the Purchase Request button during submission
6. Success toast with Project and Material names
7. Success modal with options: “Create Another Request” and “Go to Materials List”
8. Clear error handling for validation, backend, and network errors
9. Fix for duplicate dropdown arrows in dark mode

Related PRS (if any):

This frontend PR is related to the #2034 backend PR.

Main changes:

• HighestGoodNetworkApp/src/components/BMDashboard/PurchaseRequests/PurchaseForm.jsx : Adds Joi validation (client-side and per-field), field-level error state, success modal with “Create Another Request” and “Go to Materials List”, loading state (isSubmitting), and toast/error handling for success and failure cases.
• Update HighestGoodNetworkApp/src/components/BMDashboard/PurchaseRequests/PurchaseForm.module.css : For styling

How to test:

1. Check out the current branch.
2. Run npm install and npm start to run the app locally.
3. Clear site data/cache.
4. Log in as an admin user.
5. Go to /bmdashboard/materials/purchase
6. Required fields: Confirm Project, Material, Quantity, and Priority show *.
7. Quantity validation: Leave Quantity empty or enter 0 or negative, blur the field – inline error should appear.
8. Submit prevention: Click Purchase Request with invalid/empty required fields – general error message should appear near the button, form should not submit.
9. Loading state: Submit a valid form – button should show “Submitting...” and be disabled until the request finishes.
10. Success flow: After success, verify toast and modal with project/material names and options “Create Another Request” and “Go to Materials List”.
11. Error flow: Simulate a failure – verify an appropriate error toast/message.
12. Dark mode: Enable dark mode and confirm above all.

Screenshots or videos of changes

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	140af8f
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/69880e035649f800082ee67d
😎 Deploy Preview	https://deploy-preview-4814--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
5 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