i want to build a manual notification plaform which will be hooked up to a data system and we feed in the information for the cusotmer(similar to a CRM but its only focused on notification sending). we will want to have features like selecting preconfigured "nudge message" and mode of nudge - i.e sms, email or both, and bulk action as well. search by the UUID or name, phone number or any of the fields as well. we also want to track the history of the past nudges/notifications sent
I'll help you build a comprehensive manual notification platform. This will include customer management, notification templates, multi-channel sending, search functionality, and history tracking.
I've built a comprehensive manual notification platform with all the features you requested:
Key Features:
Customer Management
- Customer list with UUID, name, email, phone, status, and tags
- Search functionality across all fields (UUID, name, phone, email)
- Status filtering (active, inactive, pending)
- Individual customer actions via dropdown menu
Notification System
- Preconfigured "nudge message" templates (Welcome, Payment Reminder, Follow-up, Special Offer)
- Multi-channel support (Email, SMS, or both)
- Custom message override option
- Bulk notification sending to selected customers
Search & Filter
- Real-time search across all customer fields
- Status-based filtering
- Select all/individual customer selection
History Tracking
- Complete notification history with timestamps
- Delivery status tracking (delivered/failed)
- Channel information for each sent notification
- Customer and template details
Bulk Operations
- Select multiple customers for bulk notifications
- Bulk action bar appears when customers are selected
- Send notifications to multiple customers simultaneously
User Experience
- Clean, responsive design using shadcn/ui components
- Tabbed interface for customers and history
- Modal dialogs for notification sending
- Status badges and visual indicators
The platform is ready for integration with your data system - you'll just need to replace the mock data with your actual API calls and database connections.
when they select the template and notificaiton channels, example for what will be sent should be displayed here and lets assume we will also support some sort of templating like {{username}} that should be clearly indicated. also for EMAIL lets also make sure we have ability to toggle between HTML and rendered view(similar to how it will look to users in email)
I'll enhance the notification dialog to include a dynamic preview section with template variable support and HTML/rendered email views.
I've enhanced the notification dialog with comprehensive preview functionality:
New Features Added:
Template Variables Support
- Templates now include variables like
{{name}},{{email}},{{phone}}, etc. - Clear visual indication of available variables for each template
- Automatic replacement with sample data in previews
- Support for custom variables in custom messages
Dynamic Preview Section
- SMS Preview: Shows message in a mobile-like chat bubble
- Email Preview: Full email layout with headers (From, To, Subject)
- Real-time updates as you change templates or channels
Email HTML/Rendered Toggle
- Rendered View: Shows how the email will actually appear to users
- HTML View: Shows the raw HTML source code
- Rich HTML templates with styling, colors, and formatting
Enhanced Templates
- Welcome Message: Includes account details and styling
- Payment Reminder: Professional layout with payment info
- Follow-up: Clean design with contact information
- Special Offer: Eye-catching promotional design with gradient backgrounds
Smart Preview Logic
- Shows appropriate message when no template/channels selected
- Handles both template and custom message scenarios
- Responsive layout that works on different screen sizes
The preview updates in real-time as users select templates, channels, or modify custom messages, giving them a clear understanding of exactly what their customers will receive!