Sanjeev: Fix Create New Event Button in Upcoming Events Section

[sanjeev29]

Description

Main changes explained:

• Create file src/actions/communityPortal/eventActions.js - Introduces createEvent action function that makes POST requests to ENDPOINTS.EVENTS API endpoint. Includes error handling and toast notifications for success/error states.

• Create file src/components/CommunityPortal/Reports/Participation/CreateEventModal.jsx - New modal component for event creation with form fields.

• Update file src/components/CommunityPortal/Reports/Participation/MyCases.jsx - Added:

  • Import for CreateEventModal component
  • State management for modal visibility (isCreateModalOpen)
  • onClick handler on the "+ Create New" button to open the modal
  • Rendering of CreateEventModal component

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 admin user
5. navigate to communityportal/reports/participation on the UI
6. click on + Create New button which should open a modal for event creation.

Screenshots or videos of changes:

https://www.dropbox.com/scl/fi/9jpaohap7a0wq2y0bt8bs/PR-4365-video.mov?rlkey=lzmomi7ulch56nztjlkg1j3pk&st=ne0zvdmm&dl=0

Note:

The UI currently displays dummy/mock events, so the newly created event will not appear in the list immediately. Verify success by checking the Network tab response (status 201 and the created event object) to confirm the event was created in the backend.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	87e705b
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/69813db5a940a700082a683d
😎 Deploy Preview	https://deploy-preview-4366--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.

[Prem203]

Reviewed the Pr with an admin account. The event creation modal is working as expected and on adding a new event the dialog box appears in the top right. The network ta response also confirms that event is created and the payload is generated to be pushed.

[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

[Anusha-Gali]

Hi Sanjeev,

I have reviewed your PR locally and have verified the successful event creation payload.

[beblicarl]

The functionality works perfectly however the UI is bad in darkmode

[Shravan-neelamsetty]

Hi Sanjeev, I tested this PR locally after temporarily commenting out the missing CSS import on line 23 of CreateEventModal.jsx ("../../../Header/DarkMode.css" doesn't exist and causes a build error). After this fix, I navigated to /communityportal/reports/participation and clicked the "+ Create New" button, which successfully opens the event creation modal. The form displays all necessary fields correctly, and I verified in the Network tab that submitting an event returns status 201 with the created event object, confirming the backend integration works.

[abhinav-TB]

Hi Sanjeev, I tested your PR locally and everything seems to work properly. I was able to see the modal and was able to submit it without any issues.

[Vikas-8055]

Hi Sanjeev, I performed local testing on this PR and identified a build issue caused by the missing DarkMode.css import reference on line 23 of CreateEventModal.jsx. Upon commenting out this problematic import, I proceeded to test at /communityportal/reports/participation where the "+ Create New" button successfully triggered the event creation modal. All form fields rendered as expected, and I validated the backend integration by creating a test event the Network tab confirmed a successful 201 response with the complete event object in the payload.

[Ganesh112001]

Hi Sanjeev, I tested this PR locally following the provided steps and encountered a blocking import error that prevents the application from loading. After checking out the Sanjeev-fix-create-new-event-button branch, running npm install, and starting the dev server with npm run dev, the browser displayed an error stating "Failed to resolve import '../../../Header/DarkMode.css' from 'src/components/CommunityPortal/Reports/Participation/CreateEventModal.jsx'. Does the file exist?" This error appears on line 23 of the CreateEventModal.jsx file, where it attempts to import a CSS file that either doesn't exist in the repository or has an incorrect relative path. As a result, the entire application fails to load, and I cannot navigate to /communityportal/reports/participation to test the "+ Create New" button functionality as intended. This import path issue needs to be resolved before the PR can be properly tested and approved for merge, as it currently blocks all reviewers from accessing the feature without manually modifying the code.

[Anusha-Gali]

Hi Sanjeev,

Reviewing this PR again since Jae asked me to. Everything appears to be working as expected, i would like to point out one small UI issue which is that the calendar is in light mode in dark mode.

[saitejakaasoju]

Hi Sanjeev,
I reviewed this PR locally by logging in as an admin and navigating to the Upcoming Events section. The “+ Create New” button now works as expected, and I was able to successfully create an event.
One minor UI observation: in dark mode, some of the text inside the Upcoming Events cards appears slightly hard to read due to low contrast.

[shashank-madan]

Functionality works as expected. however text in dark mode does not seem to be visible clearly. Please also create a task for rendering the created backend events instead of mock data. Thank you.

HGN.APP.-.Google.Chrome.2026-01-31.19-27-12.mp4

[rohanrastogi311]

Hi Sanjeev,

Well done with this implementation.

[sonarqubecloud]

Quality Gate passed

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

[one-community]

Thank you all, merging!