Livechat Dashboard

CX analytics dashboard built to visualize company, employee, and project metrics from Google Sheets data.

Live Demo

https://livechat-dashboard.vercel.app

Features

Multi-View Architecture

• Company Performance: High-level overview of total chats, leads, and global averages
• Employee Performance: Deep dive into individual agent metrics with a dedicated sidebar filter
• Project Performance: Analyze specific project verticals (for example, Automotive and Merchandise)

Cyberpunk Aesthetic

• Glassmorphism UI: Translucent cards with backdrop blur
• Neon Color Coding:
  • Company: Cyan (#00f3ff)
  • Employee: Purple (#bc13fe)
  • Project: Lime Green (#39ff14)
• Gold Standard: Critical FRT (First Response Time) metrics highlighted in Gold (#FFD700) for visibility

Robust Data Handling

• Real-time Sync: Fetches live CSV data from Google Sheets
• Smart Aggregation: Automatically sums volumes and averages rates based on the active view
• Sanitization: Handles noisy data (for example, strips s, %, and text from number fields)

Problem

Live chat operations need fast visibility into response time, volume, leads, and agent performance. When the data lives in spreadsheets, leaders often lose time manually preparing reports.

Solution

The dashboard reads Google Sheets CSV data and turns it into operational views for company, employee, and project performance. It focuses on the metrics a CX lead needs to scan quickly.

Tech Stack

• Framework: React + Vite
• Styling: Vanilla CSS (custom design system with CSS variables)
• Charts: Recharts
• Data Fetching: PapaParse

What This Shows

• Domain knowledge in CX operations
• Dashboard design for operational decision-making
• Data cleaning and aggregation from spreadsheet sources
• Chart-based reporting with React and Recharts
• Deployed frontend app with live demo

Quick Start

Prerequisites

• Node.js (v14 or higher)
• npm or yarn

Installation

1. Clone the repository:

   git clone https://github.com/abhilashrajjan-555/Livechat_Dashboard.git

2. Navigate to the directory:

   cd Livechat_Dashboard

3. Install dependencies:

   npm install

4. Start the development server:

   npm run dev

Deployment (Vercel)

1. Create a Vercel account
2. Click Add New Project
3. Select this GitHub repository
4. Click Deploy
5. Vercel will detect a Vite project and configure build settings automatically

License

This project is proprietary software of Xtreme Online Solutions.