Notification Template Management UI
Summary
One screen edits notification templates. It reads and writes the legacy event-key template model, not the extracted service's versioned channel model.
Audience
Engineers, QA, support, HR administrators and architects.
Reference Content
The verified reference material for this topic is set out in the sections below.
Administration flow
Layout
A master-detail screen. The left side lists every template by event key as selectable buttons with the active one highlighted. The right side edits the selected template.
Selection defaults to the first returned row when nothing is selected, so the screen is never empty after a successful load.
Editing model
Edits are made against a local draft copy rather than the loaded row, so unsaved changes are held in component state. Saving sends the four template fields plus the two channel flags and replaces the matching row in local state with the server's response.
There is no unsaved-changes guard: selecting a different event key or leaving the screen discards the draft silently, with no prompt.
Fields
| Field | Control |
|---|---|
| Title template | Text input |
| Message template | Text area |
| Email subject template | Text input |
| Email body template | Text area |
| Email enabled | Toggle switch |
| In-app enabled | Toggle switch |
The two toggles are custom switch controls rather than native checkboxes.
Preview
Sends a preview request for the selected event key with an empty sample-data object and renders the returned title, message, email subject and email body.
Because the sample data is always empty and there is no input for supplying values, the preview exercises the server's own default substitution behavior. An administrator cannot preview with their own test values through this screen.
The preview is generated from the saved template, not the current draft, so previewing after editing but before saving shows the previously saved content.
Reset
Guarded by a confirmation modal — the only destructive-action confirmation in the notification UI. Confirming posts the reset and replaces the row in local state with the server's response, then shows a success toast.
Placeholders
The screen displays a static hint listing seven available placeholders covering employee name, company name, manager name, date, amount, month, year and action URL. This is a hard-coded display string in the component, not a list fetched from the server, so it can drift from what templates actually support.
Feedback
All outcomes surface through a single toast state. Failures attempt to render the server's error payload and fall back to a generic message. Save, preview and reset all share one saving flag that disables the action buttons while any of them is in flight.
Which template model this edits
This screen operates on the legacy model: integer identifiers, one row per event key, separate in-app and email fields on the same row, and enabled flags per channel.
It does not edit the extracted service's model, which is versioned per tenant, key and channel with separate rows per channel. Those templates are visible read-only in the operations console and are otherwise editable only through the extracted service's API.
Super-admin portal
The super-admin portal exposes the identical screen through a one-line re-export of this component, so both portals present the same editor against the same endpoints.
Classification
Transitional.
Requires confirmation
Which template model is canonical, and whether this screen will be repointed at the extracted service, require confirmation.
Related Articles
See Also
Keywords
- Notification database
- Template Management
- Draft database documentation
Source References
UI/salary-ui/apps/client-hrms-portal/src/pages/admin/NotificationTemplateManagementPage.tsxControllers/NotificationTemplatesController.csUI/salary-ui/apps/super-admin-portal/src/pages/admin/NotificationTemplateManagementPage.tsxUI/salary-ui/apps/client-hrms-portal/src/components/AppLayout.tsx
Revision Information
- Status: Draft
- Last reviewed: 2026-07-21
- Review cycle: Quarterly