Ticket Detail & Management

<div class="features-wrapper"> <h2>The Complete Ticket Workspace</h2> <p>The Ticket Detail page is where the actual support work happens. It uses a responsive three-column layout: the <strong>left panel (2/3 width)</strong> contains the conversation timeline with real-time messaging, while the <strong>right sidebar (1/3 width)</strong> contains all metadata, assignment controls, and supplementary cards. The sticky header shows the ticket number, live title, current status/priority badges, and a save button.</p> <h2>Page Layout</h2> <table> <thead> <tr><th>Section</th><th>Location</th><th>Contents</th></tr> </thead> <tbody> <tr><td><strong>Header</strong></td><td>Top (sticky)</td><td>Back button, ticket number (#), live title, status badge, priority badge, Save button</td></tr> <tr><td><strong>Timeline</strong></td><td>Left (2/3)</td><td>Message thread, activity log, real-time conversation</td></tr> <tr><td><strong>Details Card</strong></td><td>Right sidebar</td><td>Title, Description, Priority, Status, Category fields</td></tr> <tr><td><strong>People Card</strong></td><td>Right sidebar</td><td>Customer selector, Agent assignment, Tags</td></tr> <tr><td><strong>Tasks Card</strong></td><td>Right sidebar</td><td>Linked sub-tasks for this ticket</td></tr> <tr><td><strong>Watchers Card</strong></td><td>Right sidebar</td><td>Users monitoring this ticket for updates</td></tr> <tr><td><strong>Links Card</strong></td><td>Right sidebar</td><td>Related, blocking, parent/child ticket relationships</td></tr> <tr><td><strong>SLA Card</strong></td><td>Right sidebar</td><td>First response and resolution SLA timers with visual status</td></tr> <tr><td><strong>Notes</strong></td><td>Right sidebar</td><td>Internal notes about the customer (visible only to agents)</td></tr> <tr><td><strong>Feedback Card</strong></td><td>Right sidebar</td><td>Customer satisfaction rating and feedback text</td></tr> <tr><td><strong>Files</strong></td><td>Right sidebar</td><td>File browser for attachments with upload, browse, and delete</td></tr> </tbody> </table> <div class="feature-grid"> <div class="feature-card"> <h3>💬 Real-Time Conversation Timeline</h3> <p>The left panel contains the complete message history between agents and the customer. Support agents can compose responses, add internal notes (visible only to team members), and view the full activity log including status changes, assignment modifications, and system events. Messages support rich text formatting and file attachments inline.</p> </div>

<div class="feature-card">
  <h3>📋 Editable Ticket Details</h3>
  <p>The Details card contains all core fields in an editable form: <strong>Title</strong>, <strong>Description</strong> (textarea), <strong>Priority</strong> (dropdown with 5 levels), <strong>Status</strong> (dropdown with 8 states — only visible in edit mode), and <strong>Category</strong> (dropdown with 8 options). All changes are saved when clicking the header Save button.</p>
</div>

<div class="feature-card">
  <h3>⏱️ Dual SLA Timer</h3>
  <p>The SLA card displays two separate countdown timers: <strong>First Response SLA</strong> — tracking time until the agent's first reply, and <strong>Resolution SLA</strong> — tracking time until the ticket is resolved. Each timer shows a color-coded status indicator: <strong>Blue</strong> (on track, &gt;24h remaining), <strong>Amber</strong> (warning, &lt;24h remaining), <strong>Red</strong> (breached, deadline exceeded), or <strong>Green</strong> (completed on time). Exact due dates and completion timestamps are displayed beneath.</p>
</div>

<div class="feature-card">
  <h3>🔗 Ticket Linking System</h3>
  <p>Connect tickets together using relationship types: <strong>Related</strong> (informational link), <strong>Blocks / Blocked By</strong> (dependency relationship), <strong>Parent / Child</strong> (hierarchical breakdown), and <strong>Duplicate</strong> (same issue reported multiple times). Links are bidirectional — creating a "Blocks" link on Ticket A automatically creates a "Blocked By" link on Ticket B.</p>
</div>

<div class="feature-card">
  <h3>👁️ Watchers</h3>
  <p>Add team members as <strong>watchers</strong> who receive notifications for all updates to this ticket without being the assigned agent. Useful for managers monitoring critical issues, or cross-team stakeholders who need visibility into specific customer problems.</p>
</div>

<div class="feature-card">
  <h3>📁 File Browser &amp; Attachments</h3>
  <p>The integrated <strong>File Browser</strong> dialog provides full attachment management: upload new files directly, browse and attach existing files from the Media Library, view all ticket-level attachments (excluding message-level ones), and delete attachments when needed. The file count is displayed on the trigger button.</p>
</div>

<div class="feature-card">
  <h3>✅ Sub-Tasks</h3>
  <p>Create and track <strong>sub-tasks</strong> directly from the ticket detail page. This is essential when a ticket requires work from multiple teams — for example, a billing fix might require a database change (Engineering task) and a customer notification (Support task). Each sub-task links back to the parent ticket.</p>
</div>

<div class="feature-card">
  <h3>⭐ Customer Feedback</h3>
  <p>When a customer submits feedback after resolution, the <strong>Feedback Card</strong> displays their star rating (1–5) and any written comments. If the customer submitted feedback through multiple channels (e.g., widget and email), all feedback sources are displayed together for a complete satisfaction picture.</p>
</div>

<div class="feature-card">
  <h3>📝 Internal Notes</h3>
  <p>The <strong>Notes</strong> section allows agents to record internal observations about the customer that persist across tickets. These notes are only visible to support team members — never to the customer — and provide important context for future interactions.</p>
</div>

</div> <h2>Ticket Link Types</h2> <table> <thead> <tr><th>Link Type</th><th>Reverse Link</th><th>Use Case</th></tr> </thead> <tbody> <tr><td>Related</td><td>Related</td><td>Two tickets about similar topics</td></tr> <tr><td>Blocks</td><td>Blocked By</td><td>This ticket must be resolved before the linked ticket can proceed</td></tr> <tr><td>Blocked By</td><td>Blocks</td><td>This ticket cannot proceed until the linked ticket is resolved</td></tr> <tr><td>Parent</td><td>Child</td><td>This ticket is a high-level issue broken into smaller child tickets</td></tr> <tr><td>Child</td><td>Parent</td><td>This ticket is a specific sub-task of a larger parent issue</td></tr> <tr><td>Duplicate</td><td>Duplicate</td><td>Same issue reported by different customers or channels</td></tr> </tbody> </table> <h2>Step-by-Step: Resolving a Critical Ticket</h2> <ol> <li><strong>Open</strong> the ticket from the dashboard or via direct URL <code>/admin/tickets/{id}</code>.</li> <li><strong>Review</strong> the customer's initial message and any subsequent conversation.</li> <li><strong>Set Status</strong> to "In Progress" in the Details card to start the SLA clock acknowledgment.</li> <li><strong>Compose Response</strong> in the timeline — ask for clarification or provide an initial solution.</li> <li><strong>Attach Evidence</strong>: If needed, upload screenshots or logs via the File Browser.</li> <li><strong>Create Sub-Tasks</strong>: If the fix requires engineering work, create a sub-task in the Tasks card and assign it.</li> <li><strong>Link Related Tickets</strong>: If you discover other customers reported the same issue, link them as "Duplicate".</li> <li><strong>Add Watchers</strong>: Add the customer success manager as a watcher for visibility.</li> <li><strong>Resolve</strong>: Once the issue is fixed, write a final response explaining the resolution, and set Status to "Resolved".</li> <li><strong>Save</strong>: Click the Save button in the header. The SLA card updates to show green checkmarks for completed timers.</li> </ol> <div class="usecase-example"> <h3>Enterprise Use Case: Multi-Team Critical Incident Resolution</h3> <p>A SaaS platform's payment processing goes down across all regions. The first ticket (#4521) arrives from a customer in Europe. The on-call support agent opens the ticket detail page, immediately sets the <strong>Priority</strong> to "Critical" and <strong>Category</strong> to "Technical". They add 3 watchers: the VP of Engineering, the CTO, and the Customer Success Director. They create two <strong>sub-tasks</strong>: "Investigate payment gateway timeout" (assigned to Backend Engineering) and "Prepare customer communication" (assigned to Marketing). As more tickets arrive (#4522, #4523, #4524), the agent opens each one and links them to #4521 as <strong>"Duplicate"</strong>. The engineering team resolves the root cause in 45 minutes. The agent writes a comprehensive resolution message on #4521, marks it as "Resolved", and all linked duplicate tickets are automatically flagged for review. The <strong>SLA card</strong> shows green checkmarks — first response was under 5 minutes, resolution under the 1-hour SLA target. Two hours later, the customer submits a 5-star <strong>feedback</strong> rating with the comment: "Fastest resolution we've ever experienced."</p> </div> </div>