Sayali/email management fixes

[sayali-2308]

##Description
This PR completes the Email Management UI improvements by addressing all 11 critical issues identified in Chaitanya's comprehensive feedback on PR #4492, plus additional dark mode and layout improvements. This work takes over from Shravan's incomplete work and provides a complete, tested solution for the Email Announcement System frontend.
Fixes: #4762 (Priority: High) - Email Management UI Enhancement
Implements: Email Management System - Complete UI/UX Fixes with Dark Mode Support

##Related PRs:
Frontend:
Supersedes #4492 (Apoorva - original with conflicts)
Supersedes #4731 (Apoorva - clean version)
Takes over from shravan/email-management-fixes (incomplete)

Backend:
This frontend PR is related to OneCommunityGlobal/HGNRest#1945 backend PR (Chaitanya - Mailchimp Replacement)
To test this frontend PR, you need to checkout the backend PR #1945 on branch chaitanya-mailchimp-replacement

##Main changes explained:
Issue 1: URL Navigation
Updated src/components/Announcements/platforms/email/index.jsx - Added React Router integration with useHistory and useLocation hooks
Updated src/routes.jsx - Added missing routes and fixed import paths
Created getViewFromPath() function to parse URLs and sync with component state

Issue 2: Search UX in Templates
Updated EmailTemplateList.jsx - Controls stay visible during loading with disabled state

Issue 3: Variable Labels in Preview
Created getVariableTypeIcon() helper function with emoji icons (📄, 🎥, 🖼️, etc.)
Updated EmailTemplateEditor.jsx and EmailTemplateList.jsx to show icons

Issue 4: Remove Validate API
Deleted validateEmailTemplate import and function calls from EmailTemplateEditor

Issue 5: Template Creation Bug
Created createdTemplateId state variable to track newly created templates
Updated Save logic to use templateId || createdTemplateId for updates

Issue 6: Auto Extract Messages
Updated Auto Extract to use toast.info instead of toast.alert

Issue 7: Invalid YouTube URL Validation
Updated VariableRow component in IntegratedEmailSender.jsx
Created red Alert component with FaExclamationTriangle icon

Issue 8: Draft Management
Updated handleClearDraft to use RESET_FORM action
Updated Toast from info to success for better feedback

Issue 9: Outbox Management
Created Confirmation dialog in handleRetryEmail
Updated labels from "Sent/Failed Recipients" to "Sent/Failed Batches"

Issue 10: Template Load Error Handling
Created Loading, Success, and Error toasts for template loading

Issue 11: Resend Email Modal Blocking
Updated handleSubmit in ResendEmailModal to not await full completion
Modal closes immediately after initiating resend

##Additional Dark Mode & Layout Improvements:
Updated src/components/Announcements/platforms/email/EmailPanel.css - Added centering (max-width: 1400px, margin: 0 auto) and comprehensive dark mode styles
Updated src/components/EmailManagement/email-sender/IntegratedEmailSender.jsx - Fixed table header background color for dark mode
Updated src/components/EmailManagement/email-sender/IntegratedEmailSender.module.css - Enhanced dark mode styling for forms, buttons, and inputs
Updated public/index.css - Fixed background color inconsistencies
Fixed src/components/Announcements/platforms/social/SocialMediaComposer.jsx - Corrected import paths for CharacterCounter and ConfirmationModal
Moved SocialMediaComposer.module.css to correct location

##How to test:
Setup:
Check out branch sayali/email-management-fixes
Run npm install to ensure dependencies are up to date
Clear site data/cache (Ctrl+Shift+Delete or Cmd+Shift+Delete)
Backend: Check out branch chaitanya-mailchimp-replacement in HGNRest repo
Backend: Run npm install && npm run dev (should start on port 4500)
Frontend: Run npm start (should start on port 5173)
Log in as a user with sendEmails permission (use devadmin@hgn.net)

Test Issue 1 (URL Navigation):
Go to Announcements → Email
Verify URL is /announcements/email and dashboard shows
Click "Manage Templates" card → Verify URL changes to /announcements/email/templates
Click "Back to Dashboard" → Verify URL returns to /announcements/email
Click "Email" card → Verify URL changes to /announcements/email/send
Click "Outbox" tab → Verify URL changes to /announcements/email/outbox
Press browser back button multiple times → Verify navigation works correctly

Test Issue 2 (Search UX):
Go to Templates page
Type "test" in search box
Verify search bar, sort dropdown, and "Create Template" button stay visible during loading
Verify only the template list area shows loading spinner

Test Issue 3 (Variable Labels):
Go to Templates list → Click "Details" (ℹ️ icon) on any template
Verify variables show with emoji icons like "📄 name" (not "name (No Label)")
Click "Edit" on a template → Click "Preview"
Verify same emoji icon format in preview modal

Test Issue 4 (Validate API):
Open DevTools → Network tab
Create/edit template → Click "Save & Continue"
Verify NO call to /validate endpoint (only POST/PUT to /api/email-templates)

Test Issue 5 (Template Save Bug):
Create template with unique name "UniqueTest789"
Click "Save & Continue" (1st time) → Verify toast: "Template created successfully! You can continue editing."
Make a change to content → Click "Save & Continue" (2nd time)
Verify toast: "Template updated successfully!" (NOT "name already exists" error)

Test Issue 6 (Auto Extract):
Create template with content: "Hello world" (no variables)
Click "Auto Extract" → Verify blue info toast says "No variables found..."
Add content: "Hi {{name}}" → Auto Extract → Add variable
Auto Extract again → Verify blue info toast says "All variables already defined..."

Test Issue 7 (Invalid YouTube):
Send Email → Select "Test Template by Anusha"
Fill videoUrl with: https://www.youtube.com/watch?v=INVALIDFAKE123
Verify red Alert box appears with error icon (not gray placeholder)
Verify error message explains video couldn't be loaded

Test Issue 8 (Draft Management):
Send Email → Select template → Fill variables
Wait 3 seconds (auto-saves)
Refresh page → Verify "Draft Available" notification shows
Click "Restore" → Verify form restored
Click "Clear Draft" → Verify form cleared completely and notification gone
Refresh page → Verify no draft notification

Test Issue 9 (Outbox):
Switch to Outbox → DevTools Network tab → Verify API call
Switch to Send → Switch to Outbox again → Verify another API call
Click "Retry" on FAILED email → Verify confirmation dialog appears
Click "Details" on email → Verify shows "Sent Batches" and "Failed Batches" (not Recipients)

Test Issue 10 (Template Load Error):
Normal: Select template → Verify loading + success toasts
Error Simulation: DevTools → Network request blocking → Add pattern email-templates → Enable blocking
Select template → Verify error toast and template not selected
Disable blocking

Test Issue 11 (Resend Modal):
Outbox → Click "Resend" on any email
Select recipient option → Click "Resend Email"
Verify modal closes immediately
Verify toast: "Email created for resend successfully!"

Test Dark Mode (All Pages):

1. Enable dark mode from profile menu
2. Navigate through all Email Management pages:

• Email Dashboard
• Send Email (with template selected showing variables table)
• Templates List
• Create/Edit Template
• Outbox

3. Verify all text is readable, forms are styled, buttons are visible, tables have proper contrast
4. Test all 11 issues above work correctly in dark mode

##Screenshots or videos of changes:
Upload these screenshots/videos:

Issue #7 - Invalid YouTube URL:

Issue #9 - Email Details Modal (Batches):

Issue #11 - Resend Modal:

Dark Mode - Send Email with Variables:

Dark Mode - Templates List:

Dark Mode - Outbox:

Dark Mode - Email Dashboard:

Dark Mode - Create/Edit Template:

Dark Mode - Full Send Email Page:

##Note:
For Reviewers:

• All 11 issues from Chaitanya's PDF feedback have been addressed and tested
• This PR supersedes both Sai Shravan Neelamsetty taking over for Apoorva - Redo of email management UI improvements PR#4670 #4492 and Sai Shravan Neelamsetty taking over for Apoorva - Email Management System - Complete Implementation #4731
• Backend PR Revert "Revert "Frontend Release to Main [3.25]"" #1945 must be running for full testing
• Dark mode has been fully implemented across all Email Management pages
• Layout is now properly centered with consistent spacing
• All file imports have been fixed (PRDashboard, CharacterCounter, ConfirmationModal, SocialMediaComposer CSS)

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

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

[Anusha-Gali]

Hi Sayali,

I have reviewed your PR locally and find my points below:

• Bug at test issue 5,6 (see below for video)
• Query at 7,8 and 9,11

Test Issue 1 - Success

5112.-.test.issue.1.mp4

Test Issue 2 - Success

5112.-.test.issue.2.mp4

Test Issue 3,4 - Success

5112.-.Test.issue.3.4.mp4

Test Issue 5,6 - Partial Success

5112.-.Test.Issue.5.6.mp4

Query - As you can see in the video, the moment i change the mode from light to dark or vice versa, the page refreshes and i loose the template i am working on, if the template is not saved prior.

5112.-.test.issue.5.6.bug.mp4

Test Issue 7,8 - Partial Success

5112.-.Test.Issue.7.8.mp4

Query/Note - The warning could also be in red color in dark mode and also would there not be a preview shown for urls similar to image?

Test Issue 9,11 - Success

5112.-.Test.Issue.9.11.mp4

Note: The tab below as you can see in the video is not visible in light mode. (not a major issue). On a side note, the toast message for resend is different then what is mentioned in description. (Do look into them if needed for this PR)

UI.issue.mp4

Test Issue - 10 - Success

5112.-.Test.Issue.10.part.1.mp4

[sayali-2308]

Hi @Anusha-Gali ,
I have addressed all the change requests from your review:
Theme toggle losing template — Fixed for both Send Email and Create Template pages. Content is now preserved when switching between light and dark mode.
Warning in red in dark mode — The "Please review carefully" alert now shows in red in dark mode.
URL preview — Added a link preview for URL-type variables, similar to the image preview.
Resend toast — Fixed duplicate toasts and corrected the message to "Email created for resend successfully!" as mentioned in the description.
Merge conflict — Resolved the routes.jsx conflict.

Please let me know if you have any further feedback!
Thanks,
Sayali

[Anusha-Gali]

Hi Sayali,

I have reviewed your PR locally and below is my review on each fix. Since the changes i suggested are just UI, please check with Jae if you wanna make/ not make those changes and merge the PR.

• Theme toggle losing template — Fixed

Theme.toggle.losing.template.-.fixed.mov

• Warning in red in dark mode — The "Please review carefully" alert now shows in red in dark mode. - It is still shown in grey in dark mode

• URL preview — Fixed ( If possible can you make the text color blue as shown in light mode for the url preview in dark mode

• Resend toast — Fixed

[sonarqubecloud]

Quality Gate passed

Issues
278 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
2.0% Duplication on New Code

See analysis details on SonarQube Cloud

[sayali-2308]

Hi @Anusha-Gali
Thank you for the review! I have addressed the remaining feedback:
URL preview text color The URL preview link now shows in blue (#3182ce) in both light and dark mode.
Merge conflicts Resolved conflicts in src/components/Announcements/index.jsx, src/routes.jsx, and src/utils/URL.js with the latest development branch.
Please let me know if you have any further feedback!