Mail Parser
The Mail Parser module allows users to automatically extract data from incoming emails and map it into structured CRM fields. This page covers all major features, including table view, card view, actions, pagination, export, and the detail sheet.
1. Overview
The Mail Parser screen displays all existing email parsers created within the system. Each parser monitors a specific email address and automatically extracts data from messages to populate CRM entities.
Figure 1: Mail Parser main screen showing list of parsers.
2. Core Features
| Feature | Description |
|---|---|
| List and Card View | Toggle between a table (list) and grid (card) layout. Each card or row displays key parser info such as name, domain, source, and email. |
| Detail Sheet | Clicking a parser name or card opens a Mail Parser Detail Sheet, showing complete configuration details. |
| Breadcrumb Navigation | The page automatically registers in the app breadcrumb as Settings / Mail Parser. |
| Dynamic Data Fetching | Uses RTK Query hooks useLazyGetAllParserQuery and useGetAllParserForExportQuery for pagination, filtering, and exporting data. |
| Responsive Toolbar | Includes a Create Parser button and a sidebar toggle menu for mobile view. |
3. Table View (DataTable)
The table view displays all parsers in a structured tabular format using the shared DataTable component.
| Column | Description |
|---|---|
| Select | Allows selecting multiple parsers for bulk actions. |
| Name | Displays the parser name (clickable to open details). |
| Identifier | Unique identifier for the parser. |
| The email address monitored by the parser. | |
| Source | The source or origin for parsing (e.g., Mailgun, Gmail, etc.). |
| Status | Shows whether the parser is Published or Draft. |
| Created At | Displays the creation date of the parser. |
| Actions | Provides options to View, Edit, or Delete the parser. |
Figure 2: Mail Parser DataTable view with action menu.
4. Card View
Each parser can also be viewed as a card (rendered by MailParserCard). Cards provide a clean overview of each parser’s data and status.
Card Elements
| Element | Description |
|---|---|
| Status Badge | Displays Published or Unpublished in the top-right corner. |
| Avatar | Auto-generated initials based on the parser’s name. |
| Details | Shows name, identifier, domain, email, and source. |
| Timestamp | Displays "Last Updated" relative time using Luxon (toRelative()). |
Figure 3: Mail Parser card view showing detailed parser info.
5. Actions Menu
Each row in the DataTable (and card) includes an Actions dropdown menu powered by the DropdownMenu component.
Available Actions
| Action | Description |
|---|---|
| View | Opens the Mail Parser Detail Sheet to review the parser configuration. |
| Edit | Redirects to the Parser Builder screen (APP_URLS.CRM.PARSER_BUILDER?edit={id}). |
| Delete | Triggers a confirmation modal before deleting a parser (only available when parser is not published). |
6. Mail Parser Detail Sheet
The ViewMailParserDetailSheet component provides an in-depth view of each parser’s data and configuration.
Key Details Shown
- Parser name and identifier
- Email and source
- Domain
- Status (Published / Unpublished)
- Timestamps for creation and update
7. Toolbar & Export Options
The top toolbar includes:
- Create Parser button – opens the Mail Parser Builder for creating new parsers.
- Export – integrated via
useGetAllParserForExportQuery, allowing export to CSV/Excel.
8. Pagination and Filtering
The DataTable supports full pagination and server-side filtering.
| Function | Description |
|---|---|
| Pagination | Managed using handlePaginationFunction(page, limit) to fetch the next data set. |
| Filtering | Uses handleFilterFn(filter, key, pagination) to refine results by keyword or specific filter criteria. |
| Dynamic Updates | Pagination and filtering updates trigger re-fetching via RTK Query for smooth UX. |
9. Technical Stack
| Component / Library | Purpose |
|---|---|
RTK Query (useLazyGetAllParserQuery, useDeleteParserMutation) | API integration for CRUD operations. |
| Luxon | Date formatting and relative time display. |
| Lucide Icons | For actions (Edit, View, Delete). |
| Sonner Toasts | For showing success messages after delete. |
| DataTable | Custom reusable component for displaying structured data. |
| InitialsAvatar | Avatar component generating initials from parser names. |
10. Summary
The Mail Parser module provides an intuitive interface for managing, monitoring, and configuring automated email parsers. With its dual layout (table and card), integrated actions, export, and detailed sheet views, it ensures both visibility and control over every email parsing configuration.
Last updated: 13 Nov 2025