Feat(spa) : Add Zendesk Support Inbox SPA

[Dishant-garg]

Pull Request: Zendesk Support Inbox SPA

📋 Overview

This PR delivers a production-ready Zendesk-inspired support inbox SPA designed as a training environment for reinforcement-learning agents to practice ticket triaging, macro application, and escalation coordination in a fully offline sandbox.

🎯 Issue Reference

Implements the complete feature set outlined in the original issue for a Zendesk-style support system with RL agent compatibility.

---

✅ Minimal Functionality - All Requirements Met

1. Agent Dashboard ✓

• ✅ Queue health metrics (new, pending, breached SLAs)
• ✅ Personal performance stats driven by useDojoState
• ✅ Real-time metric calculations from ticket data
• ✅ Visual KPI cards with color-coded status indicators

Components: Dashboard.tsx, QueueMetrics.tsx, PerformanceStats.tsx

2. Ticket Inbox ✓

• ✅ Comprehensive ticket list with infinite scroll
• ✅ Multi-dimensional filters (status, priority, tags, assignee)
• ✅ Bulk actions support (status change, assignment, tagging)
• ✅ Visual selection mode with multi-select checkboxes
• ✅ Seeded with 8 realistic ticket fixtures spanning all statuses

Components: TicketList.tsx, TicketFilters.tsx, BulkActions.tsx, RightSidebar.tsx

3. Ticket Workspace ✓

• ✅ Tabbed interface: Conversation | Internal Notes | SLA Timeline
• ✅ Full conversation history with customer/agent message threads
• ✅ Internal notes panel (private agent collaboration)
• ✅ Comprehensive customer profile sidebar with interaction history
• ✅ Actions persisted via dojo.setState:
  • Add public reply
  • Add internal note
  • Change status (new → open → pending → solved → closed)
  • Assign/reassign tickets
  • Apply macros
  • Update priority
  • Manage tags

Components: TicketWorkspace.tsx, ConversationHistory.tsx, InternalNotes.tsx, CustomerProfile.tsx, TicketSidebar.tsx, TicketActions.tsx

4. Macros Library ✓

• ✅ 6 pre-configured canned response templates
• ✅ Category-based organization (Account Access, Billing, Technical, etc.)
• ✅ Automatic state updates (status, priority, tags) on application
• ✅ Template variable replacement ({{customer.name}}, {{agent.name}})
• ✅ One-click macro application with toast notifications
• ✅ Usage tracking per macro

Components: MacroLibrary.tsx
Fixtures: macros.ts (6 production-ready templates)

5. SLA Tracker ✓

• ✅ Visual timeline widget showing ticket lifecycle
• ✅ Breach risk indicators with color-coded warnings
• ✅ Automatic SLA event recording:
  • Ticket creation
  • Agent assignment
  • Customer/agent responses
  • Status changes
  • Priority escalations
  • Warning thresholds (50%, 75%, 90% of SLA time)
  • Breach events
• ✅ Timeline events filterable for RL inspection
• ✅ Progress bar with time remaining/overdue calculations

Components: SLATracker.tsx
State Management: slaEvents array in AppContext

---

🛠️ Technical Implementation - All Requirements Met

✅ Vite + React + TypeScript Scaffold

zendesk/app/
├── src/
│   ├── components/       # 27 organized components
│   ├── contexts/         # AppContext with dojo-hooks
│   ├── fixtures/         # Complete offline seed data
│   ├── theme/           # Zendesk-inspired theme
│   └── types/           # Full TypeScript definitions
├── vite.config.ts
├── tsconfig.json
└── package.json

✅ @chakra-dev/dojo-hooks for State Management

• No bespoke global stores - all state managed through useDojoState
• Context wraps entire app with AppProvider
• Exposed helpers:
  • useApp() - Full context access
  • useDojo() - Direct state/setState access
  • Actions: updateTicket(), applyMacro(), recordSLAEvent(), createTicket()

File: src/contexts/AppContext.tsx (232 lines)

✅ No Authentication - Direct Business Context

• Zero login/signup flows
• Boots directly into agent dashboard
• Default agent pre-configured in state
• Focus entirely on support workflows

✅ Responsive Layouts (1280px & 1440px)

• Custom breakpoints configured in theme
• Tested at both standard (1280px) and wide (1440px) viewports
• Flexible sidebar widths (52px → 270px → 320px)
• Responsive grid layouts in Dashboard and Macros

Theme config: xl: '80em' (1280px), 2xl: '90em' (1440px)

✅ Lean Dependencies

{
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "@chakra-ui/react": "^2.8.2",          // Design system ✓
    "@emotion/react": "^11.11.1",           // CSS-in-JS
    "@emotion/styled": "^11.11.0",
    "framer-motion": "^10.16.4",            // Animations
    "@chakra-dev/dojo-hooks": "^1.0.0",    // State management
    "react-icons": "^4.12.0",               // Icons ✓
    "date-fns": "^2.30.0"                   // Date utilities
  }
}

• Total production deps: 7
• No unnecessary bloat - only essential packages
• Design system (Chakra UI) ✓, Icons (react-icons) ✓, Date utils ✓

✅ Complete Offline Operation

Seed Data Included:

• ✅ 8 tickets spanning all statuses with rich conversation history
• ✅ 5 customers with varying profiles and satisfaction levels
• ✅ 3 agents with availability and workload stats
• ✅ 6 macros covering common support scenarios
• ✅ All data relationships intact (customer↔tickets, agents↔assignments)

Files: fixtures/tickets.ts, fixtures/customers.ts, fixtures/macros.ts

---

🎨 UI/UX Highlights

Zendesk-Authentic Design

• Color palette matches Zendesk brand (#03a69a teal primary)
• Dark sidebar navigation (#0b3d3b)
• Status badges with semantic colors
• Familiar layout patterns and conventions

Component Architecture

• 7 feature modules: dashboard, inbox, workspace, macros, sla, layout, contexts
• 27 total components - fully modular and reusable
• Barrel exports (index.ts) for clean imports
• TypeScript interfaces for all data models

Key Interactions

• Infinite scroll in ticket list (loads 20 at a time)
• Bulk selection mode with visual feedback
• Tabbed workspace interface
• Macro quick-apply from dropdowns
• Real-time SLA tracking with visual timeline
• Toast notifications for user actions

---

📊 State Management Deep Dive

All state managed through @chakra-dev/dojo-hooks as required:

const [state, setState] = useDojoState<AppState>(initialState)

interface AppState {
  tickets: Ticket[]           // 8 seeded tickets
  customers: Customer[]       // 5 customer profiles
  agents: Agent[]             // 3 support agents
  macros: Macro[]             // 6 canned responses
  currentAgent: Agent         // Active agent context
  slaEvents: SLAEvent[]       // SLA timeline events
  ticketFilters: {...}        // Active filter state
  metrics: {...}              // Computed metrics
}

Action Creators:

• updateTicket(ticketId, updates) - Persists ticket changes
• applyMacro(ticketId, macroId) - Applies template + actions
• recordSLAEvent(event) - Logs SLA events for RL
• createTicket(data) - Generates new ticket

All mutations immutably update state via setState().

---

🤖 RL Agent Compatibility

Observable State

• All ticket operations tracked in slaEvents array
• Event types: created, assigned, agent_response, customer_reply, status_change, warning, escalation, breach, macro_applied
• Rich metadata attached to each event

Agent Training Scenarios

1. Triage Practice: New tickets require status assessment
2. Priority Escalation: Urgent tickets with approaching SLAs
3. Macro Selection: Match ticket type to appropriate response template
4. SLA Management: Balance response time vs. ticket complexity
5. Bulk Operations: Efficient handling of multiple tickets

Metrics for Reward Functions

• SLA compliance rate
• Average response time
• Ticket resolution time
• Customer satisfaction (good/neutral/bad)
• Macro usage efficiency

---

📁 File Structure

zendesk/app/
├── src/
│   ├── components/
│   │   ├── dashboard/        # Queue metrics & performance
│   │   ├── inbox/           # Ticket list, filters, bulk actions
│   │   ├── workspace/       # Conversation, notes, profile
│   │   ├── macros/          # Macro library
│   │   ├── sla/            # SLA tracker timeline
│   │   └── layout/         # Header, sidebars, navigation
│   ├── contexts/
│   │   └── AppContext.tsx   # Dojo state management
│   ├── fixtures/
│   │   ├── tickets.ts       # 8 seeded tickets
│   │   ├── customers.ts     # 5 customers + 3 agents
│   │   └── macros.ts        # 6 macro templates
│   ├── types/
│   │   ├── ticket.ts        # Ticket data models
│   │   ├── macro.ts         # Macro interfaces
│   │   └── index.ts         # Exported types
│   ├── theme/
│   │   └── index.ts         # Zendesk-inspired Chakra theme
│   ├── App.tsx             # Root component
│   └── main.tsx            # Entry point
├── package.json            # Dependencies
├── tsconfig.json          # TypeScript config
├── vite.config.ts         # Vite config
└── README.md             # Comprehensive documentation

Total Files: 45+ production files
Lines of Code: ~3,500+ LOC

---

🚀 Getting Started

cd zendesk/app
npm install
npm run dev

Opens at http://localhost:3000 with full seed data loaded.

---

✨ Notable Features Beyond Requirements

1. Customer Profile Sidebar - Complete customer history & stats
2. Create Ticket Modal - New ticket generation UI
3. Tag Management - Add/remove tags with visual chips
4. Internal Notes - Private agent collaboration space
5. Attachment Support - File upload UI (fixtures include examples)
6. Toast Notifications - User feedback for all actions
7. Search & Filters - Advanced ticket querying
8. Responsive Scrollbars - Zendesk-style custom scrollbars
9. Keyboard Navigation - Accessibility improvements
10. Comprehensive README - Production-quality documentation

---

🧪 Testing Scenarios

Manual Testing Checklist:

• View dashboard metrics
• Filter tickets by status/priority
• Select multiple tickets (bulk mode)
• Apply bulk status change
• Open ticket workspace
• Add public reply
• Add internal note
• Apply macro template
• Update ticket status
• Change priority (triggers SLA event)
• Assign/reassign ticket
• View SLA timeline
• Check customer profile
• Browse macro library
• Create new ticket

---

📈 Metrics

• Components: 27
• Fixtures: 8 tickets, 5 customers, 3 agents, 6 macros
• State Events: 10+ SLA event types
• TypeScript Interfaces: 15+
• Theme Customizations: Full Zendesk color palette
• Responsive Breakpoints: 5 (sm, md, lg, xl, 2xl)

---

🎯 Success Criteria - All Met ✅

✅ Agent dashboard with queue health and performance stats via dojo state
✅ Ticket inbox with filters, bulk actions, infinite scroll over seeded data
✅ Ticket workspace with tabbed view and all actions persisted via dojo.setState
✅ Macros library with canned responses updating state and appending replies
✅ SLA tracker with timeline, breach warnings, and RL-inspectable events
✅ Vite + React + TypeScript scaffold under zendesk/app
✅ @chakra-dev/dojo-hooks for all shared state (no bespoke stores)
✅ No authentication flows - boots to business context
✅ Responsive layouts at 1280px and 1440px
✅ Lean dependencies - design system, icons, charts within reason
✅ Complete seed state - fully offline operational

---

Closes: #3

Type: ✨ Feature
Scope: New SPA Module
Breaking Changes: None

---

Video:

Screen.Recording.2025-11-01.at.8.29.25.PM.mov

Ready to merge!

[Dishant-garg]

@0xnirmal -- Please review this PR!!

[rakesh0x]

please record the working prototype and add in the pr description

[Dishant-garg]

@Dzaka-athif --Can you please review it??

[Dishant-garg]

@0xnirmal -- Can you please review it??