Client Communication History
Client Communication History
The Communications tab on every Client Detail page provides a complete timeline of all interactions with that client. The component — ClientCommunicationsTab.vue — displays emails, phone calls, meetings, SMS messages, and internal notes in a unified chronological view.
Communication Types
Five communication types are tracked, each with a dedicated icon and colour:
| Type | Icon | Colour |
|---|---|---|
| mdi-email | Primary (blue) | |
| Phone Call | mdi-phone | Success (green) |
| Meeting | mdi-calendar | Purple |
| SMS | mdi-message-text | Info (light blue) |
| Note | mdi-note-plus | Grey |
ClientCommunication Model Fields
Every communication record is stored in the client_communications table with these fields:
- client_id — required reference to the parent client.
- project_id — optional link to a related project.
- client_contact_id — optional link to a specific contact person.
- type — one of: email, phone, sms, meeting, note.
- direction — inbound or outbound.
- subject — subject line or title.
- body — full message content.
- from_email / to_email — sender and recipient email addresses.
- from_phone / to_phone — sender and recipient phone numbers.
- status — one of: draft, sent, delivered, read, failed.
- sent_at / delivered_at / read_at — delivery milestone timestamps.
- duration_minutes — call or meeting duration in minutes.
- outcome — meeting result or call disposition.
- attachments — JSON array of file references.
- metadata — additional data as JSON (integration references, etc.).
Filters
A filter card sits above the timeline with three controls:
- Type — multi-select dropdown (chips, closable) to filter by communication type.
- Contact — single select filtered by the client's contacts, displaying full_name.
- Date Range — date picker for start and end dates.
Action Buttons
Below the filters, four action buttons appear:
- New Email — primary colour button with mdi-email icon. Opens the EmailComposerDialog.
- Log Call — tonal button with mdi-phone icon. Opens the CallLogDialog.
- Log Meeting — tonal button with mdi-calendar icon. Opens the MeetingLogDialog.
- Add Note — tonal button with mdi-note-plus icon. Creates an internal note.
Timeline View
Communications display in a vertical timeline (v-timeline, side=end, density=compact). Each entry contains:
- Timeline dot — coloured by communication type with matching icon.
- Type chip — small coloured chip showing the type label.
- Subject — displayed as subtitle-1 text.
- Timestamp — relative date shown in caption text on the right.
- Contact info — "From" for inbound or "To" for outbound, followed by the contact's full name.
- Duration — shown for calls and meetings (e.g. "Duration: 45 minutes").
- Body text — the communication content in body-2 text.
Sentiment Analysis
Automatic sentiment detection adds a tonal chip below the body text:
- Positive — green chip with smile icon.
- Neutral — grey chip with neutral face icon.
- Negative — red chip with sad face icon.
Attachments and Related Projects
- Attachments — appear as small outlined chips with mdi-paperclip icon. Click to download.
- Related project — tonal chip with mdi-folder icon. Click to navigate to the project.
Entry Actions
Each timeline entry provides three actions:
- Reply — text button with mdi-reply icon. Opens the email composer with reply context.
- Edit — text button with mdi-pencil icon. Opens the entry for editing.
- Delete — icon button (mdi-delete) on the right side.
Response Time Tracking
The getResponseTimeMinutes() method on the ClientCommunication model calculates how long your team took to respond to an inbound message. It finds the next outbound communication to the same client after the inbound message's sent_at timestamp and returns the difference in minutes.
Merge Variables for Templates
When composing emails, templates support these merge variables: {{ client_name }}, {{ contact_name }}, {{ total_projects }}, {{ total_revenue }}, {{ account_manager }}, and {{ health_score }}.
Was this article helpful?