# AI Call Operations Manager Dashboard

## Overview

This is a real-time AI call operations monitoring dashboard built with React and Express. The application provides a three-panel interface for monitoring AI agents handling customer calls, viewing live call details with transcripts, and managing customer profiles with personalized offers. The dashboard follows Carbon Design System principles optimized for data-heavy enterprise monitoring interfaces.

## User Preferences

Preferred communication style: Simple, everyday language.

## System Architecture

### Frontend Architecture
- **Framework**: React 18 with TypeScript
- **Routing**: Wouter (lightweight client-side router)
- **State Management**: TanStack React Query for server state with automatic refetching (5-second intervals for dashboard data, 3-second for transcripts)
- **UI Components**: Shadcn/ui component library built on Radix UI primitives
- **Styling**: Tailwind CSS with custom CSS variables for theming (light/dark mode support)
- **Build Tool**: Vite with HMR support

### Backend Architecture
- **Framework**: Express.js with TypeScript
- **HTTP Server**: Node.js createServer wrapping Express for WebSocket compatibility
- **API Pattern**: RESTful endpoints under `/api/` prefix
- **Data Layer**: In-memory storage (MemStorage class) with interface abstraction (IStorage) for easy database swap

### Three-Panel Dashboard Layout
- **Left Panel (320px)**: AI Agent tiles showing status, active call counts, and mini call cards
- **Middle Panel (flexible)**: Call detail view with live timer, soundwave indicators, transcript, and timeline
- **Right Panel (384px)**: Customer profile, personalized offers, and interaction summary

### Data Models
Core entities defined in `shared/schema.ts` using Drizzle ORM:
- **Agents**: AI agents with status tracking (active/waiting/issue)
- **Calls**: Active calls with sentiment scores, upsell tracking, speaker identification
- **Customers**: Customer profiles with tier levels and engagement scores
- **Offers**: Personalized offers with priority rankings
- **TranscriptMessages**: Real-time conversation logs
- **TimelineEvents**: Call interaction milestones

### API Endpoints
- `GET /api/dashboard` - Aggregated dashboard data (agents, calls, customers, offers, KPIs)
- `GET /api/agents` - List all agents
- `GET /api/agents/:id` - Single agent details
- `GET /api/calls/:id/transcript` - Call transcript messages
- `GET /api/calls/:id/timeline` - Call timeline events

### Build System
- **Development**: Vite dev server with HMR, proxied through Express
- **Production**: esbuild bundles server code, Vite builds client to `dist/public`
- **Database Migrations**: Drizzle Kit with PostgreSQL dialect

## External Dependencies

### Database
- **PostgreSQL**: Primary database (configured via `DATABASE_URL` environment variable)
- **Drizzle ORM**: Type-safe database queries with Zod schema validation
- **connect-pg-simple**: Session storage (available but not currently active)

### UI Framework
- **Radix UI**: Accessible component primitives (dialog, dropdown, tabs, tooltips, etc.)
- **Lucide React**: Icon library
- **Embla Carousel**: Carousel component
- **Recharts**: Data visualization charts
- **class-variance-authority**: Component variant management

### Development Tools
- **Replit Plugins**: Runtime error overlay, cartographer, dev banner (development only)
- **TypeScript**: Strict mode enabled with path aliases (@/, @shared/, @assets/)

### Fonts
- **Inter**: Primary UI font (Google Fonts)
- **JetBrains Mono**: Monospace font for timestamps, call IDs, metrics