Purav takeover- collaboration ads creation page (clean re-port onto development)

[pixelpix13]

Description

Clean re-port of the collaboration job ads creation frontend onto latest development. This supersedes the older/conflicted frontend work on #4307 by rebuilding the feature-scoped changes cleanly (not continuing the old messy merge history).

Adds Admin/Owner job-ad creation UI, job details and apply-link pages, collaboration listing image/category fixes, and the createCollabJobAds permission entry.

Pair with backend: HGNRest#2385 (manoj-collaboration-ads-creation-page on HGNRest). Check out both branches together for end-to-end create ���� list ���� details ���� apply flows (Dropbox upload + application email need the backend PR env vars).

Related PRS (if any):

• Backend (required for E2E): Purav Taking over for Meenashi - collaboration ads creation page (clean re-port onto development) HGNRest#2385
• Old frontend PR being replaced: Purav taking over - creation tool for questions for the user to answer #4307
• Prior backend PR that 2385 re-ports: Manoj taking over for Meenashi - collaboration ads creation page HGNRest#1872

Main changes explained:

• Job Ads Creation (/jobAdsCreation) ���� New form to create collaboration job ads (category, position, description, projects, requirements, Our Community, Dropbox image URL, apply-link / job form). Protected route: Owner and Administrator only.
• Header ���� Other Links ���� Job Ads Creation ���� Nav entry visible only when role is Owner or Administrator.
• Permission createCollabJobAds ���� Added to Permissions.json / route permissions (intended for Owner/Administrator).
• Job Details (/jobDetailsLink/:id) ���� Dev/test route only (renders saved ad fields + form questions). Not part of production UX; use /job-application for the real apply flow.
• Job Apply (/jobApplyLink/:formId) ���� Dev/test route only for form wiring checks. Do not test responsiveness or dark mode on this route or on /jobDetailsLink/:id (covered by the main job application page).
• Collaboration listing ���� Uses ad imageUrl with category-image fallback; normalizes Dropbox share links to raw=1 so images render.
• Category filter ���� Categories with commas (e.g. Architecture, Landscape & Environment) are JSON-encoded in the query so they are not split incorrectly.
• Show Summaries button ���� CSS overflow fix so the control is not clipped.
• Dropbox image URL validation ���� isValidDropboxImageUrl requires a Dropbox host and an image extension (jpg/jpeg/png/gif/webp). Prefer links ending in raw=1 (not dl=0) so listing/details images load.

How to test:

Setup

1. Check out manoj-collaboration-ads-creation-page on HighestGoodNetworkApp and the matching branch on HGNRest for backend PR #2385.
2. Confirm Node 20; run npm install / yarn if needed on each repo.
3. Backend: add Dropbox + BASE_FRONTEND_URL + job-application email env vars from Peterson implement the create project feature in the user profile section and in the project tab #2385, then npm run build and npm start (API http://localhost:4500).
4. Frontend: npm run start:local ���� http://localhost:5173
5. Clear site data/cache if nav or permissions look stale.
6. Log in as Admin: devadmin@hgn.net / DeveloperPassword100%! (or an Owner account).

A) Nav + route access (Owner / Administrator only)

1. As Owner or Administrator, open header Other Links.
2. Confirm Job Ads Creation is listed; open it ���� http://localhost:5173/jobAdsCreation loads the form.
3. As Volunteer (or any non-Owner/non-Administrator): confirm Job Ads Creation is not in Other Links.
4. As Volunteer, navigate directly to /jobAdsCreation ���� expect redirect / access denial (ProtectedRoute allows only Administrator and Owner).

B) Create a job ad

1. On /jobAdsCreation, fill required fields: Category, Position, Description, Projects, Requirements, Our Community, Image URL, Apply Link (job form).
2. Image URL: use a Dropbox image from
   https://www.dropbox.com/scl/fo/817lsk8fmvx5cdexbk07x/APOLV_TrgXHFLJATnj1xVFg?rlkey=rgs3pfrbav2hf6a2el6dtblnf&e=1&dl=0
   Change dl=0 ���� raw=1 (or ensure the link is a Dropbox image URL the validator accepts).
3. Invalid / non-Dropbox image URL ���� validation error; valid Dropbox image URL ���� save succeeds.
4. If Our Community includes a video entry, supply width & height as required by the form.
5. Confirm questions update when the selected apply/job form changes.

C) Collaboration listing + category filter

1. Open http://localhost:5173/collaboration (public job browsing).
2. Filter by the category/position you created.
3. New ad should appear; card image should show the ad imageUrl (Dropbox raw=1), or category fallback if missing/unusable.
4. Pick a category whose name contains a comma (if available) and confirm jobs still filter correctly (JSON-encoded category param).

D) Job details + apply (optional dev smoke only)

/jobDetailsLink/:id and /jobApplyLink/:formId exist for internal/dev testing of saved ad data and form wiring. They are not required for QA sign-off. Use /job-application for production apply UX, responsiveness, and dark mode.

1. Optional: open /jobDetailsLink/<jobId> and confirm saved fields match the create form.
2. Optional: open /jobApplyLink/<formId> to sanity-check form load (no responsiveness/dark-mode testing required on these routes).

E) UI polish + dark mode

1. On /collaboration, confirm Show Summaries is fully visible (no clipped overflow).
2. Toggle dark mode on /jobAdsCreation and /collaboration ���� logo sizing matches collaboration, TinyMCE fields use dark styling, labels/errors remain readable.
3. Skip dark mode / responsive testing on /jobDetailsLink/:id and /jobApplyLink/:formId (test-only routes; job application page covers apply UX).

Screenshots or videos of changes:

Note:

• This is a clean re-port onto current development, not a continuation of the conflicted history from #4307.
• Must pair with (Purav Taking over for Meenashi - collaboration ads creation page (clean re-port onto development) HGNRest#2385) for create/list/details/apply E2E (Dropbox upload + application email).
• Image URLs should be Dropbox links suitable for <img> ���� prefer raw=1 instead of dl=0. Suggested folder: https://www.dropbox.com/scl/fo/817lsk8fmvx5cdexbk07x/APOLV_TrgXHFLJATnj1xVFg?rlkey=rgs3pfrbav2hf6a2el6dtblnf&e=1&dl=0
• Nav/route gating is Owner / Administrator role-based; createCollabJobAds is registered in Permissions.json for permission management alignment with the backend.
• /jobDetailsLink/:id and /jobApplyLink/:formId are test-only routes; reviewers do not need to test responsiveness or dark mode on them because /job-application is the supported apply experience.

pr.5629_video.mp4

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	c0b35ed
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6acb273433e9f70008b2217d
😎 Deploy Preview	https://deploy-preview-5629--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.

[vidiyala99]

Tested 3e7fb9e with backend OneCommunityGlobal/HGNRest#2385 (070055f) as Administrator on a test server, in light and dark mode. The create request was blocked in the browser, so no job ad was written to the shared dev database.

What works:

• Tests: the Collaboration suites pass (9 files, 89/89), and #2385's suites pass on the same server (collaborationController.collabAds, jobsController, jobs.preValidate, middleware.jobforms: 4 suites, 57/57).
• Navigation and access: "Job Ads Creation" appears under Other Links for an Administrator and opens /jobAdsCreation.
• Form: choosing a category loads its positions (Administrative & Support: Administrative Assistant, Fundraising-outreach Help), the four editors, Image URL, the fixed "remote" location and the Apply Link list (42 job forms) all work, and validation stops the submit with a clear message per field. With everything filled in, Submit sends POST /api/jobs with title, category, description, requirements, projects, ourCommunity, imageUrl, location and applyLink.
• Dark mode: labels, selects and editors are readable (screenshot 2).

1. A failed save wipes the whole form. createCollaborationAds catches its own error (it only shows the toast) and never rethrows, so submitJobAds always runs setFormData({ ...initialState }), success or not. When I made the create request fail, the toast said "Error updating the details. Please try again." and every field was cleared: category, title, all four editors, image URL and apply link (screenshot 1). An admin who just wrote 30+ words in each of three editors loses all of it on any server or network error. Rethrowing from the action (or returning a success flag) and resetting only on success would fix it.

2. The description error message says "characters" but the rule counts words. validateJobAdsForm checks getWordCount(description) < 30 but the message is "Description must be at least 30 characters long", so a 200-character, 25-word description gets a confusing error. The other three fields correctly say "words".

3. Design note: the Apply Link option value is the backend address ${APIEndpoint}/jobforms/<id> (on this server http://localhost:4500/api/jobforms/692231d7bcba075ed0de3991), and the detail/apply pages later split it on jobforms/ to get the id. Saving just the form id (or a frontend route) would keep the stored ads independent of which environment created them.

Requesting changes for item 1.

Screenshot 1: the form after a failed save (every field cleared)

Screenshot 2: Collaboration Ads Creation in dark mode

[RichaSapre]

I reviewed the collaboration job-ad creation flow, role-based routing, validation, dark mode, and listing updates. Most functionality works as expected.

I found that a failed create request clears the entire form because the form resets after dispatch regardless of whether the API call succeeds. The form should reset only after a confirmed successful submission.

I also found that the description validation checks for 30 words but displays an error stating “30 characters.”

[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