Skip to project content
Yulai FanAbout
Product

IR Inbox

I designed and built the frontend for a working investor-relations inbox, connecting AI triage, ticket routing, and response workflows in Next.js and TypeScript.

IR Inbox

Overview

A working IR workspace that brings classification, ownership, human review, and response controls into one interface. My work connects typed ticket data, synchronized inbox and thread views, filtering, and editable drafts so the team can act on requests with their context intact.

My contribution
Interaction design and frontend implementation
Stack
Next.js, React, TypeScript, and the InstaLILY UI library
Data model
Typed tickets, threads, attachments, owners, and response states
Workflow
AI triage, ticket routing, human review, and response management

Model the request before the screen

The ticket is the shared unit behind the inbox and detail view. Its TypeScript model includes category, owner, status, confidence, thread messages, and attachment metadata. A taxonomy of nine parent groups and 17 categories gives the filters and editing controls the same vocabulary.

Keeping classification, ownership, and response status as separate fields lets the interface show what a request concerns, who is responsible, and where it stands. Thread messages and attachments stay connected to the same ticket as those decisions change.

Keep edits connected across views

The frontend stores edits as partial ticket patches keyed by ID and merges them into the ticket records. The inbox and thread page both read the same store, so changes to an owner, category, or status remain visible when moving between screens.

localStorage preserves those patches across navigation. A custom event updates other mounted consumers in the same tab, and the browser’s storage event propagates changes between tabs. This keeps the queue and detail view connected throughout a review session.

Implementation

Connect ticket data, review decisions, and response controls across the working inbox.

  1. 01

    Derive the queue from data

    URL parameters select the inbox view or folder. Search and fund, category, assignee, and status filters compose over the patched dataset before sorting and pagination. Filter changes reset the page, and page bounds adjust to the remaining results.

  2. 02

    Track draft provenance

    The reply composer distinguishes the initial AI-suggested draft from a human edit. Typing or inserting an acknowledgment template clears the AI-drafted state; rating or dismissing a suggestion adds a local audit entry.

  3. 03

    Manage scheduled replies

    The scheduling interface uses structured reply records with recipient, body, time, and status. Editing, rescheduling, and cancellation keep the message and its timing connected in the scheduled view.

  4. 04

    Keep review connected to action

    My Routed, Unassigned, and Needs Review expose different kinds of work. Within a ticket, the team can revise category, owner, status, and draft content while retaining the thread and attachment context.

Ticket state and workflow

Ticket data to connected views

How typed ticket records and edits flow through the inbox and thread views.

Typed ticket recordsMerge patches by ticket IDFilter, sort, and paginateInbox and thread views

Editing and synchronization

State changeImplementation behavior
Owner, category, or status editedMerge a partial patch into the record keyed by ticket ID
Patch savedWrite to localStorage and dispatch a same-tab update event
Another tab changes a ticketRead the updated patches through the storage event
Human edits the suggested draftClear the AI-drafted flag in the composer
Reply scheduledStore recipient, content, time, and status for the scheduled view
Connected workflow

ClassificationCategory and confidence

AssignmentOwner and queue

AI draftHuman review and edits

ResponseSend or schedule

Investor request lifecycle

How incoming requests move through triage, review, response, and feedback.

Investor request lifecycleAn incoming investor relations email is classified, scored, routed, resolved with human review, sent through an approved response path, and recorded. Corrections feed back into future triage.IntakeAI triageRoutingResolutionResponse and outcomesSufficientLow confidenceNo ownerYesNeeds changesMisclassification signalIncomingIR emailSharedIR inboxClassify, score,propose ownerConfidencesufficient?My RoutedNeeds ReviewUnassignedReview thread,context, SLAEdit AIdraftHumancontrolsGovernedtemplateApproveresponse?Send, schedule,or campaignReplydeliveredSLA andaudit trailHumanfeedbackRevise owner,category, draft