A purpose-built triage workspace designed for human Customer Experience (CX) agents to instantly prioritize, manage, and resolve escalated conversations. Built with React 19, TypeScript, Vite, Tailwind CSS, and Framer Motion.
Fully functional with mock data via MSW (Mock Service Worker) — no backend required.
-
Install dependencies:
npm install
-
Run the local development server:
npm run dev
-
Open the browser: Navigate to http://localhost:5173/
-
Production build verification:
npm run build
The assignment brief asks how to turn an ambiguous problem (a noisy, generic queue causing agents to miss critical updates) into a sharp, shippable product. Here are the core user-centric features implemented to achieve this:
Agents often start their shift under pressure, with managers demanding statistics. We built a collapsible high-fidelity metrics dashboard inside the sidebar (closed by default to reduce clutter) and a larger, operations-center dashboard rendered directly on the Welcome Screen when no conversation is active. It displays live calculations of:
- Unassigned Tickets: Immediate visibility of unallocated work.
- SLA Breaches: Open conversations waiting for more than 30 minutes.
- Avg Wait Time: Helps track queue health.
- Avg CSAT: Gives immediate feedback on team performance.
To help agents "know what to do first within seconds," urgent conversations waiting >30 minutes get marked with a pulsing SLA Breach badge. Additionally, cards for breaching tickets are styled with a subtle red border and pink backdrop when not selected, creating an immediate visual hierarchy.
To ensure agents can work without their hands leaving the keyboard, we integrated:
- Inline Kbd Badges: Next to actionable buttons, we display display small keyboard key indicators (e.g.,
[A]for Assign to me,[R]for Resolve). - Command-Style Search (
/): Pressing/instantly focuses a command-style search input to filter the inbox list. - Welcome Screen Reference: The main welcome workspace features a beautiful 2-column grid reference displaying all shortcuts, with the navigation shortcuts taking full width of the table.
- Interactive Guide Modal (
?): Pressing?opens a premium spring-animated keyboard shortcuts overlay modal.
j/ArrowDown— Navigate to the next conversation card (takes full width)k/ArrowUp— Navigate to the previous conversation card (takes full width)i— Focus the reply input fieldEsc— Unfocus/Blur the current input fielda— Assign the active conversation to yourselfr— Resolve the active conversation/— Focus the inbox search input?— Open/close the keyboard shortcuts help dialog
The application features a gorgeous, dark/light toggle switcher.
- Amoled/Pitch Black Canvas: The theme utilizes pure black (
dark:bg-black) backgrounds and charcoal/zinc containers (dark:bg-zinc-950) to reduce eye strain for agents working long shifts. - Clean Sidebar Pill Switcher: The toggle is beautifully positioned next to the agent profile pill at the bottom of the sidebar, separated by a vertical divider line.
The resolution endpoint has a mock 30% failure rate. Instead of changing the button text or failing silently, we designed a sliding Error Toast Notification that pops up at the top-right corner. It features an interactive, keyboard-friendly Retry button and custom bounce animations, ensuring failures can be resolved with a single keystroke.
To manage high volumes of incoming conversations without overwhelming the agent, we implemented a Ticket Buffer System in the inbox. Instead of immediately cluttering the active queue and distracting agents mid-resolution, new incoming tickets are held in a visual buffer. The buffer displays the total number of pending tickets along with a clear breakdown by priority (Urgent, High, Normal). Agents can click "Release All" to pull these buffered tickets into their active queue when they are ready, providing them with better control over their workload pacing.
- Core: React 19 + TypeScript
- Styling: Tailwind CSS for modern typography, responsive grids, and custom border/shadow highlights.
- Icons: Lucide React for consistent vector icons (WhatsApp, Email, Live Chat channel badges).
- State Management: React useReducer with a centralized hook (useConversations) for predictable event dispatching.
- Network & Mocking: Mock Service Worker (MSW) simulating real network latency (200-500ms delay) and endpoints for fetching, assigning, replying, and resolving conversations.
- Animations: Framer Motion for spring-based list entry transitions, smooth sidebar resizing, and fluid modal/toast overlays.