Email Communications HTML editor interface (frontend) Part 1

[thaninbew]

Refer to Figma -> Lofi (or mid or high if exists)-> Email Comms. for context and examples.

Summary

The backend currently has an emails module set up (using Amazon SES), but the frontend lacks the UI for managing and sending these mass email communications. This ticket is barebones and we will wait for hifi.

Implement a mass emailing interface to communicate with specific donor groups. The UI will have a tabbed layout for different email categories, a WYSIWYG (what u see is what you get) editor for customizing the message body, a customizable signature, and a preview tab to see the final output. Reuse as many existing shared components (tabs, buttons, text inputs) as possible. Note: Mock the actual sending functionality for now until Part 2.

Steps

1. Create tabs for "Donation Response", "Relapsed Donor Message", and "Other Emails". Add a new tab for "Preview".
2. Implement a text editor with essential formatting tools (bold, italic, underline, lists, links, etc.) for the "Body Text" area. use TipTap @tiptap/react
3. Implement fields/sections to append a customizable signature (Name, Position, Contacts) to the bottom of the emails.
4. Build a preview view that renders the final HTML of the email (including the body and signature) as it would appear to the recipient.
5. Add the "Save Changes" / "Send" buttons and mock the submission action (e.g., console.log the HTML payload and subject).

Acceptance Criteria

• Users can navigate between "Donation Response", "Relapsed Donor Message", "Other Emails", and "Preview" tabs.
• Users can edit the "Subject Line" and "Body Text" using a WYSIWYG editor (@tiptap/react)
• Users can set a customizable signature with their name, position, and contact info.
• The Preview tab accurately displays how the finalized email will look.
• The implementation reuses existing design system components (from shared/src/components/) wherever possible, using shadcn/ui and tailwindCSS.