Customer Support Inbox
Build an in-app support system: ticket submission, status tracking, and an admin reply inbox.
The route
5 steps to Done
- 01
Define the ticket model
Tickets, messages, and statuses need shapes before UI.
Preview prompt + verify gate ▾ Hide ▴
Define the support system model: the ticket (id, owner userId, subject, category from a fixed set, status open/in-progress/resolved, createdAt/updatedAt) and its messages (ticket id, author user/admin, body, timestamp) as a thread; the status transition rules and who can change them; visibility rules (owners see theirs, admins see all); and what notifies the user when a reply lands (in-app indicator at minimum).
- ✓ Ticket and message shapes are complete
- ✓ Status rules are explicit
- ✓ Visibility is owner/admin scoped
- 02
Build ticket submission
Users must file tickets that actually persist.
Preview prompt + verify gate ▾ Hide ▴
Implement ticket submission: a support form (subject required, category select, message textarea with min length) with validation and inline errors; submitting creates the ticket and its first message via the backend, linked to the logged-in user; a success state showing the ticket reference and expectations; loading and error states. Verify persistence by refreshing into the ticket list.
- ✓ The ticket record persists with owner
- ✓ Validation blocks bad submissions
- ✓ Success shows the ticket reference
- 03
Build the user ticket view
Users track their tickets and read replies here.
Preview prompt + verify gate ▾ Hide ▴
Implement the user's support area: a my-tickets list (subject, category, status badge, last update) newest-first, owner-scoped; ticket detail showing the full message thread (user vs admin styled), status, and a reply box to add follow-up messages; an indicator for tickets with unseen admin replies; loading/empty/error states throughout. Verify another user cannot fetch someone else's ticket by id.
- ✓ Only my tickets appear
- ✓ Follow-up replies persist to the thread
- ✓ Direct access to others' tickets is rejected
- 04
Build the admin inbox
Admins triage everything: list, filter, reply, resolve.
Preview prompt + verify gate ▾ Hide ▴
Implement the admin inbox (admin-only, enforced backend-side): all tickets with owner, subject, category, status, age; filters by status and category; ticket detail with the thread, a reply box (replies persist and appear in the user's thread), and a status control (open/in-progress/resolved) that persists; visual distinction for tickets awaiting admin response. Verify a non-admin gets 403 on all admin endpoints.
- ✓ Non-admins are rejected at the API
- ✓ Admin replies appear for the user
- ✓ Status changes persist across refresh
- 05
Close the loop and QA
Verify the full conversation lifecycle across both roles.
Preview prompt + verify gate ▾ Hide ▴
QA the support system end to end with a user and an admin account: user submits; admin sees it, replies, sets in-progress; user sees the reply and indicator, responds; admin resolves; user sees resolved. Verify every state after refresh on both sides; empty states for fresh accounts; validation and error paths on both forms; scoping with a third account. Fix everything that fails and re-run.
- ✓ The full conversation was executed across roles
- ✓ States verified after refresh on both sides
- ✓ Third-account scoping verified