CSAT UI
Frontend screens, components, and user flows for the CSAT module.
Route Structure
/csat → CSAT ratings table with filters and detail viewsThe CSAT module is accessed from the main navigation menu and requires the menu-csat permission.
Screens
CSAT Ratings Table (/csat)
The main screen of the module. Displays all customer satisfaction ratings in a paginated, server-side DataTable.
Layout:
| Section | Component | Description |
|---|---|---|
| Filters | DataTable built-in filters | Filter bar with multiple criteria |
| Table | DataTable | Paginated list of ratings with sortable columns |
| Actions | DropdownAction | Per-row actions: Details, Add/Update Comment |
Filters:
| Filter | Component | Options | Grid |
|---|---|---|---|
| Company ID | Input | Free text (comma-separated IDs) | col-lg-4 |
| Carrier | Select2 (tags) | Dynamic list from injected carriers | col-lg-3 |
| Agent | Select2 (tags) | Dynamic list from agentsList | col-lg-3 |
| Source | Select2 (tags) | Ticket, Carrier, Shop | col-lg-3 |
| Score | Select2 (tags) | 1, 2, 3, 4, 5 | col-lg-3 |
| Source Platform | Select2 (tags) | Platform, WhatsApp | col-lg-3 |
| Date Range | DatePicker | Start/end date selection | col-lg-3 |
Table Columns:
| Column | Sortable | Visible | Description |
|---|---|---|---|
| Company | Yes | Yes | Company name with logo (via Company component) |
| Carrier | Yes | Yes | Carrier name with logo (via Carrier component) |
| Source | Yes | Yes | Source type label (TICKET / CARRIER / SHOP) |
| Reference | Yes | Yes | Reference ID as clickable link (opens ticket offcanvas for tickets) |
| Rating | Yes | Yes | Star rating display + source platform icon below |
| Date | Yes | Yes | Formatted rating date |
| Comment | No | Yes | Customer comment (via TextBreaker) |
| Status | No | Yes | Ticket status badge (color-coded) |
| Actions | No | Yes | Details button + comment dropdown |
| Admin Name | No | Hidden | Follow-up admin name (export only) |
| Admin Comment Date | No | Hidden | Follow-up timestamp (export only) |
| Admin Comment | No | Hidden | Follow-up text (export only) |
| Source Platform | No | Hidden | Platform label (export only) |
| Executive Assigned | No | Hidden | Assigned executive (export only) |
| Executive Country | No | Hidden | Executive country (export only) |
Source Platform Display:
Below the star rating in each row, the source platform is shown with an icon:
- Platform: Cart icon (
fa-cart-shopping) in primary color + "Platform" label - WhatsApp: WhatsApp icon (
fa-whatsapp) in green + "WhatsApp" label
Actions per row:
| Action | Behavior |
|---|---|
| Details (ticket source) | Opens the InformationOffcanvas with the ticket detail |
| Details (carrier/shop source) | Emits showDetails to open the CSAT detail offcanvas |
| Add/Update Comment | Emits openModalComm to open the comment modal |
CSAT Survey Card (Inline in Ticket Chat)
The CsatSurveyCard component is rendered at the bottom of the ticket chat in Information.offcanvas.vue when the ticket status is ACCEPTED or DECLINED.
Layout:
┌──────────────────────────────────────────┐
│ [User Name] [Date] [Badge] │
│ ────────────── click to collapse ────── │
│ │
│ "How would you rate this service?" │
│ ★★★★☆ │
│ │
│ "Any additional comments?" │
│ ┌────────────────────────────────────┐ │
│ │ Customer comment text │ │
│ └────────────────────────────────────┘ │
│ │
│ Resolution Agent Resolution Time │
│ Agent Name 12h │
│ │
│ ── Admin Follow-up ──────────────────── │
│ Admin Name · 2026-04-11 10:00 │
│ ┌────────────────────────────────────┐ │
│ │ Admin follow-up comment text │ │
│ └────────────────────────────────────┘ │
└──────────────────────────────────────────┘Features:
- Collapsible card (expanded by default)
- Star rating display using
vue-star-rating - Customer comment with fallback text when empty
- Resolution agent name and hours to resolution
- Admin follow-up section (only shown if a follow-up exists)
Props:
| Prop | Type | Required | Description |
|---|---|---|---|
details | Object | Yes | Rating details object from GET /csat/ticket/{ticketId} |
Data Loading:
- CSAT data is lazy-loaded only when the ticket has a terminal status (ACCEPTED or DECLINED)
- The
Information.offcanvas.vuecomponent callscsat.getByTicketId(ticketId)and rendersCsatSurveyCardonly if data is returned
Service Layer
client/src/services/csat.service.js| Method | HTTP | Path | Description |
|---|---|---|---|
getTableInfo(filters) | GET | /csat | Fetches paginated ratings for the DataTable |
getDetailsInfo(id) | GET | /csat/{id} | Fetches single rating details |
getByTicketId(ticketId) | GET | /csat/ticket/{ticketId} | Fetches rating by ticket ID (for inline card) |
saveComment(comments, ratingId) | POST | /csat/comments | Creates admin follow-up comment |
updateComment(comments, ratingId) | PUT | /csat/comments | Updates admin follow-up comment |
getAgentsList() | GET | /csat/agents/list | Fetches agent list for filters |
Module-Specific Components
| Component | Location | Description |
|---|---|---|
CsatSurveyCard | views/ticketsV2/components/CsatSurveyCard.vue | Inline survey card displayed in ticket chat for terminal-status tickets |
The module otherwise reuses shared components: DataTable, DropdownAction, Company, Carrier, TextBreaker, Status, StarRating.