DemoBuy

Dashboard & Activity

Last updated on 2026-03-22

The dashboard group provides the primary landing experience for the CRM. It includes a sales overview with KPIs and charts, a chronological activity feed, and a notifications center. All three screens share the (dashboard) route group layout with AppSidebar and AppHeader.

Sales Dashboard

Route: /

The main sales dashboard is the default landing page. It provides a high-level snapshot of sales performance with real-time KPI cards, trend charts, and actionable quick links.

  • KPI stat cards -- Revenue (with trend), Deals Won, Average Deal Size, Win Rate percentage using the StatCard component
  • Revenue trend area chart -- 12-month area chart showing monthly revenue over time via Recharts AreaChart
  • Deals by stage bar chart -- horizontal bar chart breaking down deal count per pipeline stage (Lead, Qualified, Proposal, Negotiation, Closed Won, Closed Lost)
  • Recent deals table -- data table showing the 5 most recently updated deals with company, value, stage badge, owner avatar, and close date
  • Top performers leaderboard -- ranked list of sales reps by revenue closed, showing avatar, name, deals won count, revenue, and win rate
  • Quick actions -- prominent buttons for "New Deal", "Add Contact", and "Log Activity"
import { StatCard } from "@/components/dashboard/stat-card"
import { RevenueChart } from "@/components/charts/revenue-chart"
import { DealsByStageChart } from "@/components/charts/deals-by-stage-chart"
import { RecentDealsTable } from "@/components/dashboard/recent-deals-table"
import { TopPerformers } from "@/components/dashboard/top-performers"

Dashboard Layout

┌──────────┬──────────┬──────────┬──────────┐
│ Revenue  │ Deals    │ Avg Deal │ Win      │
│          │ Won      │ Size     │ Rate     │
├──────────┴──────────┼──────────┴──────────┤
│ Revenue Trend       │ Deals by Stage      │
│ (area chart)        │ (bar chart)         │
├─────────────────────┼─────────────────────┤
│ Recent Deals        │ Top Performers      │
│ (table)             │ (leaderboard)       │
├─────────────────────┴─────────────────────┤
│ Quick Actions                             │
└───────────────────────────────────────────┘

Data Sources

Data Source Location
KPI metrics dashboardStats data/seed.ts
Revenue trend revenueData data/seed.ts
Deals by stage Computed from deals data/seed.ts
Recent deals deals (sorted by updatedAt) data/seed.ts
Top performers teamMembers (sorted by revenue) data/seed.ts

Activity Feed

Route: /activity

A chronological timeline of all CRM activities across the organization. Each activity entry displays a type-specific icon, description, related entity links, and timestamp.

  • Activity timeline -- vertical timeline with type-specific icons (phone for calls, mail for emails, calendar for meetings, file-text for notes, handshake for deals)
  • Filter tabs -- pill-style tabs for All, Calls, Emails, Meetings, Notes, and Deals to narrow the feed by activity type
  • Search bar -- text input to filter activities by description, contact name, or deal name
  • Date grouping -- activities are grouped under sticky date headers: Today, Yesterday, This Week, and Earlier
  • Empty states -- contextual message when no activities match the selected filter or search query
import { ActivityTimeline } from "@/components/activity/activity-timeline"
import { ActivityItem } from "@/components/activity/activity-item"
import { ActivityFilters } from "@/components/activity/activity-filters"

Activity Types

Type Icon Color Example
Call Phone green "Called John Smith about renewal"
Email Mail blue "Sent proposal to Acme Corp"
Meeting Calendar purple "Meeting with Sarah Chen - Demo"
Note FileText amber "Added note on Globex deal"
Deal Handshake indigo "Moved deal to Negotiation stage"

Data Sources

Data Source Location
Activities activities data/seed.ts
Activity types activityTypes types/index.ts

Notifications

Route: /notifications

A notification center displaying system alerts, deal updates, task reminders, and mentions. Notifications are displayed as a scrollable list with read/unread states.

  • Notification list -- card-style list with type-specific icons, title, description, relative timestamp, and read/unread indicator (blue dot for unread)
  • Type icons -- each notification type has a distinct icon and color: deal_won (trophy, green), deal_lost (x-circle, red), task_due (clock, amber), mention (at-sign, blue), system (bell, gray)
  • Mark all as read -- button in the header to mark all notifications as read in one action
  • Notification preferences link -- link to /settings for managing notification preferences
  • Empty state -- message displayed when no notifications exist, with a description of what types of notifications will appear
import { NotificationItem } from "@/components/notifications/notification-item"
import { NotificationList } from "@/components/notifications/notification-list"

Notification Types

Type Icon Color Description
deal_won Trophy green A deal was marked as Closed Won
deal_lost XCircle red A deal was marked as Closed Lost
task_due Clock amber A task is due today or overdue
mention AtSign blue You were mentioned in a note or comment
system Bell gray System announcements and updates

Data Sources

Data Source Location
Notifications notifications data/seed.ts
Notification types NotificationType types/index.ts

Next Steps

Previous

Project Structure

Next

Contacts & Companies