DemoBuy

Tasks & Email

Last updated on 2026-03-22

The tasks and email modules provide productivity tools for CRM users. Tasks cover to-dos, calendar scheduling, and activity logging. Email provides an integrated inbox, compose workflow, templates, and automated sequences. All screens are in the (dashboard) route group.

Task List

Route: /tasks

A task management view with filtering, priority indicators, and contextual links to related CRM entities.

  • Task items -- each task shows a checkbox (toggle complete), title, priority flag (high = red, medium = amber, low = green), due date badge (color-coded: overdue = red, due today = amber, upcoming = green), assignee avatar, and linked contact/deal names
  • Filter tabs -- pill-style tabs for My Tasks (assigned to current user), All Tasks, and Completed
  • Search -- text input to filter tasks by title or related entity name
  • Sort options -- sort by due date, priority, or creation date
  • Add task dialog -- modal form with title, description, priority select, due date picker, assignee select, and optional contact/deal links
  • Inline edit -- click task title to edit inline; click assignee to reassign
  • Bulk actions -- select multiple tasks via checkboxes to mark complete or delete
import { TaskList } from "@/components/tasks/task-list"
import { TaskItem } from "@/components/tasks/task-item"
import { AddTaskDialog } from "@/components/tasks/add-task-dialog"

Priority Indicators

Priority Color Flag Icon
High red (text-red-500) FlagTriangleRight filled
Medium amber (text-amber-500) FlagTriangleRight filled
Low green (text-green-500) FlagTriangleRight outline

Due Date Badges

Status Color Condition
Overdue red background dueDate < today
Due today amber background dueDate === today
Due this week blue background dueDate within 7 days
Upcoming gray background dueDate > 7 days

Data Sources

Data Source Location
Tasks tasks data/seed.ts
Team members teamMembers data/seed.ts
Contacts contacts data/seed.ts
Deals deals data/seed.ts

Calendar

Route: /tasks/calendar

A monthly calendar grid displaying scheduled events with color-coded pills and day-level detail.

  • Monthly grid -- standard calendar grid with day cells, each containing event pills for that day
  • Event pills -- color-coded by type: meeting = blue, call = green, task = orange, email = purple; showing truncated title text
  • Day click -- clicking a day cell opens a detail panel listing all events for that day with full details (title, time, type, attendees, related entity)
  • Month navigation -- previous/next month buttons and a "Today" button to jump to the current month
  • Event creation -- double-click a day cell to open the add task/event dialog pre-filled with that date
  • Responsive -- on mobile, the calendar collapses to a list view grouped by day
import { CalendarGrid } from "@/components/tasks/calendar-grid"
import { CalendarDayCell } from "@/components/tasks/calendar-day-cell"
import { CalendarEventPill } from "@/components/tasks/calendar-event-pill"
import { DayDetailPanel } from "@/components/tasks/day-detail-panel"

Event Type Colors

Type Pill Color Icon
Meeting blue (bg-blue-100 text-blue-700) Calendar
Call green (bg-green-100 text-green-700) Phone
Task orange (bg-orange-100 text-orange-700) CheckSquare
Email purple (bg-purple-100 text-purple-700) Mail

Activity Log

Route: /tasks/activity

A comprehensive log of all CRM activities with advanced filtering and export capabilities.

  • Activity entries -- each entry shows type icon, description, user avatar and name, related entity links, and timestamp
  • Filters -- filter by user (team member select), activity type (multi-select), and date range (date range picker)
  • Pagination -- page-based navigation for large activity sets
  • Export -- button to export the filtered activity log as CSV
  • Empty state -- message when no activities match the active filters
import { ActivityLog } from "@/components/tasks/activity-log"
import { ActivityLogFilters } from "@/components/tasks/activity-log-filters"

Email Templates

Route: /tasks/templates

A library of reusable email templates with merge field support.

  • Template list -- card grid showing template name, subject line preview, category badge (Sales, Follow-up, Onboarding, Support), usage count, and last modified date
  • Search -- text input to filter templates by name or subject
  • Category filter -- dropdown to filter by template category
  • Create template dialog -- modal form with:
    • Template name and subject line inputs
    • Category select
    • Body textarea with rich formatting toolbar
    • Merge field inserter -- dropdown button to insert dynamic fields like {{firstName}}, {{companyName}}, {{dealName}}, {{dealValue}}, {{ownerName}}
  • Edit/duplicate/delete actions -- per-template action buttons
  • Preview -- modal showing rendered template with sample merge field data
import { TemplateList } from "@/components/email/template-list"
import { TemplateEditor } from "@/components/email/template-editor"
import { MergeFieldInserter } from "@/components/email/merge-field-inserter"

Available Merge Fields

Field Token Example Output
First Name {{firstName}} John
Last Name {{lastName}} Smith
Company Name {{companyName}} Acme Corp
Deal Name {{dealName}} Enterprise License
Deal Value {{dealValue}} $45,000
Owner Name {{ownerName}} Sarah Chen
Meeting Date {{meetingDate}} March 25, 2026

Email Inbox

Route: /email

A Gmail-style email inbox with a reading pane, folder navigation, and CRM integration.

  • Folder tabs -- tab navigation for Inbox, Sent, and Drafts with unread count badges
  • Email list -- scrollable list showing sender/recipient avatar, name, subject (bold if unread), preview snippet, timestamp, and star toggle
  • Reading pane -- side panel (desktop) or full-screen view (mobile) showing full email content with sender info, timestamp, and reply/forward buttons
  • Search -- text input filtering emails by sender, subject, or body content
  • Star/read states -- star emails for quick access; unread emails have bold text and a blue indicator
  • CRM contact linking -- sender email is automatically matched to CRM contacts; clicking the sender name navigates to their contact detail page
  • Bulk actions -- select multiple emails to mark as read, star, or delete
import { EmailInbox } from "@/components/email/email-inbox"
import { EmailList } from "@/components/email/email-list"
import { EmailReadingPane } from "@/components/email/email-reading-pane"

Inbox Layout

┌─────────────┬───────────────────────────────┐
│ [Inbox]     │ From: John Smith              │
│ [Sent]      │ Subject: Re: Proposal Review  │
│ [Drafts]    │ Date: Mar 22, 2026 10:30 AM   │
├─────────────┤                               │
│ ★ Email 1   │ Hi Sarah,                     │
│   Email 2   │                               │
│   Email 3   │ I've reviewed the proposal... │
│ ★ Email 4   │                               │
│   Email 5   │ [Reply] [Forward]             │
└─────────────┴───────────────────────────────┘

Email Compose

Route: /email/compose

A full-featured email composition screen with CRM-aware fields and template support.

  • To field -- input with contact autocomplete; typing shows matching CRM contacts with name and email
  • CC/BCC -- expandable fields, also with contact autocomplete
  • Subject -- text input for email subject line
  • Body -- textarea with basic formatting toolbar (bold, italic, link, list)
  • Template insertion -- "Insert Template" button opens a picker to select and insert a saved template, with merge fields automatically populated from the linked contact/deal
  • Schedule send -- "Send Later" button opens a date/time picker to schedule the email
  • Attachments -- file upload zone supporting drag-and-drop, with file list showing name, size, and remove button
  • CRM linking -- dropdown to associate the email with a specific deal and/or contact for activity tracking
import { EmailCompose } from "@/components/email/email-compose"
import { ContactAutocomplete } from "@/components/email/contact-autocomplete"
import { TemplatePicker } from "@/components/email/template-picker"

Email Sequences

Route: /email/sequences

Automated email sequence management for outreach campaigns.

  • Sequence list -- data table showing sequence name, status badge (Active = green, Paused = amber, Draft = gray), step count, enrolled contacts count, open rate percentage, and reply rate percentage
  • Sequence detail -- clicking a sequence opens its step builder:
    • Step builder -- ordered list of steps, each with a type (Email, Wait, Condition), editable content, and delay duration
    • Email steps -- select a template or write custom content, with merge field support
    • Wait steps -- configurable delay in days (e.g., "Wait 3 days")
    • Condition steps -- branch logic based on email opened, link clicked, or reply received
    • Add step -- button to append a new step of any type
    • Reorder -- drag-to-reorder steps
  • Enrollment stats -- sidebar showing total enrolled, active, completed, bounced, and unsubscribed counts
  • Performance metrics -- open rate and reply rate displayed as percentage bars for each email step
import { SequenceList } from "@/components/email/sequence-list"
import { SequenceBuilder } from "@/components/email/sequence-builder"
import { SequenceStep } from "@/components/email/sequence-step"
import { SequenceStats } from "@/components/email/sequence-stats"

Sequence Step Types

Step Type Icon Description
Email Mail Send an email using a template or custom content
Wait Clock Pause the sequence for N days
Condition GitBranch Branch based on recipient behavior

Data Sources

Data Source Location
Tasks tasks data/seed.ts
Calendar events calendarEvents data/seed.ts
Activities activities data/seed.ts
Email templates emailTemplates data/seed.ts
Emails emails data/seed.ts
Sequences emailSequences data/seed.ts

Next Steps

Previous

Deals & Pipeline

Next

Reports & Analytics