Sales Command Center Dashboard 🎯

A modern, real-time sales management dashboard for monitoring AI agents, human sales reps, and managing call queues. Built with React, TypeScript, TailwindCSS, and Vite.

✨ Key Features

🤖 AI & Human Agent Management

• Three-column dashboard with AI Agents, Sales Agents (Human Reps), and Expert Support
• 15 AI voice agents with real-time confidence scoring and handoff recommendations
• 12 human sales reps with live status tracking
• 3 expert advisors for complex deal support
• Live call duration counters that tick up every second
• Sentiment analysis indicators (positive/neutral/negative)
• Drag-and-drop call transfers between agents

📞 Advanced Call Management

• Live call monitoring with real-time transcription
• Call completion animations with sentiment color display
• Toast notifications when calls move to history
• Three-way calling support for expert assistance
• Whisper mode for private coaching during calls
• Call recording with live waveform visualization
• Automatic AI-to-human handoff for complex situations

📋 Intelligent Call Queue

• Prioritized prospect queue (High/Medium/Low priority)
• Real-time wait time tracking with overdue alerts
• Drag-and-drop prospect assignment to reps
• Auto-assign feature for load balancing
• Queue metrics dashboard (total, avg wait, oldest)
• Sort and filter capabilities

📊 Rich Detail Panels

• Prospect Details: Contact info, deal value, stage, activity timeline
• Rep Details: Live call controls, sentiment analysis, CRM integration
• AI Agent Details: Live transcript, confidence scores, handoff triggers
• Expert Details: Expertise areas, active support sessions
• Call History: Complete call summaries with transcripts and outcomes

🎨 Modern UI/UX

• Resizable panels for customized workspace
• Collapsible columns to focus on specific areas
• Context menus for quick actions
• Top performer badges (👑 Most Sales, 🏆 Most Calls)
• Color-coded status indicators
• Smooth animations and transitions
• Usage tips that rotate every 30 seconds

📈 Performance Tracking

• Real-time conversion rates
• Daily call volume metrics
• Deal value tracking
• Sentiment scoring
• Call outcome analytics (Won/Lost/Follow-up)

Tech Stack

• React 18.3 - UI framework
• TypeScript 5.3 - Type safety
• Vite 5.1 - Build tool and dev server
• TailwindCSS 3.4 - Styling
• Lucide React - Icon library

Getting Started

Prerequisites

• Node.js 18+ and npm/yarn/pnpm

Installation

1. Install dependencies:

npm install

2. Start the development server:

npm run dev

3. Open your browser to http://localhost:5173

Build for Production

npm run build

The built files will be in the dist directory.

Preview Production Build

npm run preview

Project Structure

src/
├── components/
│   ├── ThreeColumnDashboard.tsx    # Main 3-column layout (AI/Human/Experts)
│   ├── AIAgentCard.tsx             # AI agent status card
│   ├── RepCard.tsx                 # Human rep status card
│   ├── RepDetails.tsx              # Detailed rep view with call controls
│   ├── ExpertDetails.tsx           # Expert support panel
│   ├── CallQueue.tsx               # Prioritized prospect queue
│   ├── ProspectDetails.tsx         # Detailed prospect information
│   ├── CallHistory.tsx             # Historical call list
│   ├── CallSummary.tsx             # Individual call summary view
│   ├── CompletedCallAnimation.tsx  # Call completion animation
│   ├── CallHistoryNotification.tsx # Toast notification component
│   ├── ActiveCallPanel.tsx         # In-call control panel
│   ├── LiveCallRecording.tsx       # Live recording waveform
│   ├── AgentContextMenu.tsx        # Right-click context menu
│   └── ...more components
├── data/
│   ├── mockData.ts                 # 12 sales reps + 8 prospects
│   ├── mockAIAgents.ts             # 15 AI voice agents
│   └── mockCallHistory.ts          # Historical call data
├── lib/
│   └── utils.ts                    # Utility functions (cn, formatDuration)
├── types.ts                        # TypeScript type definitions
├── App.tsx                         # Main application with state management
├── main.tsx                        # Application entry point
└── index.css                       # Global styles + Tailwind

Key Components

ThreeColumnDashboard

Three-column layout with:

• AI Agents column with confidence scoring
• Sales Agents (Human Reps) column
• Expert Support column
• Advanced filtering and sorting for each column
• Collapsible columns for focused views

AIAgentCard & RepCard

Display agent status with:

• Live call duration counters (ticking every second)
• Sentiment indicators
• Confidence scores (AI agents)
• Performance metrics (human reps)
• Drag-and-drop for call transfers

CallQueue

Intelligent queue management:

• Priority-based sorting (High/Medium/Low)
• Real-time wait time tracking
• Drag prospects onto reps to assign
• Auto-assign for load balancing
• Queue metrics dashboard

RepDetails & ActiveCallPanel

Comprehensive call monitoring:

• Live transcription with timestamps
• Sentiment analysis with key quotes
• Call controls (Listen In, Whisper, Coach)
• CRM prospect information
• End call functionality with animations

CallHistory & CallSummary

Complete call records:

• Filterable call history
• Full transcripts
• Call outcomes and sentiment
• Deal values and stages
• Key points and action items

Mock Data

The application includes comprehensive mock data:

• 15 AI Voice Agents with varying confidence levels and handoff needs
• 12 Human Sales Reps with different statuses and performance metrics
• 8 Active Prospects in queue with complete deal histories
• Historical call data with transcripts and outcomes
• Real-time updates simulating live operations

Customization

Adding Real API Integration

Replace the mock data in src/data/mockData.ts with API calls:

// Example API integration
const fetchReps = async () => {
  const response = await fetch('/api/reps')
  return response.json()
}

Styling

The application uses TailwindCSS. Customize colors in tailwind.config.js:

theme: {
  extend: {
    colors: {
      primary: "hsl(221.2 83.2% 53.3%)", // Change primary color
    }
  }
}

🎥 Demo Features

Interactive Elements

• Drag & Drop: Drag prospects from queue onto reps to assign calls
• Drag AI Agents: Drag AI agent cards onto human reps for handoff
• Drag to Experts: Drag active calls onto experts for 3-way support
• Right-Click Menus: Context menus on all agent cards
• Resizable Panels: Drag panel edges to customize layout
• Collapsible Columns: Click arrows to collapse/expand columns
• Live Counters: All call durations tick up in real-time
• Call Completion: End calls to see sentiment animation + notification

Navigation

• Live Dashboard: Main view with all active agents and queue
• Call History: Switch to view completed calls with full details
• Detail Panels: Click any agent/prospect/call to see details

🚀 Future Enhancements

• WebSocket integration for true real-time updates
• Voice activity detection visualization
• Advanced analytics dashboard with charts
• Mobile responsive design
• Dark mode theme
• Export call data and reports
• SLA breach notifications
• Call recording playback
• Multi-language support
• Custom agent routing rules

📱 Browser Support

• Chrome (latest) ✅
• Firefox (latest) ✅
• Safari (latest) ✅
• Edge (latest) ✅

📄 License

MIT

👤 Author

Built for modern sales teams managing hybrid AI + human operations.

---

Note: This is a demonstration application with simulated data. For production use, integrate with your CRM, telephony system, and AI agent platform.