Creating a New Support Ticket
The structured submission form where administrators create new support tickets on behalf of customers or for internal use. Captures all essential metadata including title, description, priority, category, customer assignment, agent assignment, and tags.
Last updated: 04/14/2026, 10:13 AM
<div class="features-wrapper">
<h2>Structured Ticket Creation</h2>
<p>When a customer reports an issue via phone, email, or chat and you need to formally log it in the system, the <strong>New Ticket</strong> form provides a structured, validated workflow. Unlike tickets submitted through the Feedback Widget (which are automatically created), this form gives administrators full control over every metadata field from the moment of creation — ensuring proper categorization, assignment, and priority from the very first second.</p>
<h2>Form Layout</h2>
<p>The form uses a responsive two-column layout: the <strong>left panel (2/3 width)</strong> contains the primary content fields, and the <strong>right sidebar (1/3 width)</strong> contains metadata, assignment, and tagging controls.</p>
<h2>Form Fields Reference</h2>
<table>
<thead>
<tr><th>Field</th><th>Type</th><th>Required</th><th>Default</th><th>Description</th></tr>
</thead>
<tbody>
<tr><td><strong>Title</strong></td><td>Text Input</td><td>✅ Yes</td><td>—</td><td>A concise summary of the issue (e.g., "Cannot complete checkout on mobile"). Validated via Zod schema.</td></tr>
<tr><td><strong>Description</strong></td><td>Textarea (10 rows)</td><td>✅ Yes</td><td>—</td><td>Detailed explanation of the problem, reproduction steps, or customer context. Non-resizable.</td></tr>
<tr><td><strong>Priority</strong></td><td>Select Dropdown</td><td>✅ Yes</td><td>Medium</td><td>Options: Low, Medium, High, Urgent, Critical. Determines SLA timelines and visual urgency.</td></tr>
<tr><td><strong>Category</strong></td><td>Select Dropdown</td><td>✅ Yes</td><td>General</td><td>Options: General, Technical, Billing, Account, Feature Request, Bug Report, Integration, Security.</td></tr>
<tr><td><strong>Customer</strong></td><td>User Select</td><td>❌ No</td><td>—</td><td>Searchable dropdown to link the ticket to a registered customer. Uses the UserSelect component with real-time search.</td></tr>
<tr><td><strong>Assigned To</strong></td><td>User Select</td><td>❌ No</td><td>—</td><td>Searchable dropdown to assign a support agent. Can be left empty for later assignment during triage.</td></tr>
<tr><td><strong>Tags</strong></td><td>Multi-Select</td><td>❌ No</td><td>[]</td><td>Color-coded labels from the TicketTag registry. Select multiple tags for custom classification.</td></tr>
</tbody>
</table>
<div class="feature-grid">
<div class="feature-card">
<h3>📝 Content Section (Left Panel)</h3>
<p>The main content area is wrapped in a bordered card with a <strong>"Ticket Details"</strong> header accompanied by a ticket icon. Here you enter the <strong>Title</strong> — a clear, searchable summary — and the <strong>Description</strong> — the full context of the issue. Both fields are validated client-side using Zod schema and display inline error messages if validation fails.</p>
</div>
<div class="feature-card">
<h3>⚡ Metadata Section (Right Sidebar)</h3>
<p>The sidebar is divided into three stacked cards: <strong>Priority & Category</strong> in the first card, <strong>People</strong> (Customer & Assigned Agent) in the second card, and <strong>Tags</strong> in the third card. Each card is clearly labeled with an icon header for visual separation.</p>
</div>
<div class="feature-card">
<h3>✅ Form Validation & Submission</h3>
<p>The form uses <strong>react-hook-form</strong> with <strong>Zod</strong> resolver for client-side validation. All required fields must be filled before submission. Upon successful creation, a success toast notification appears and you are automatically redirected to the new ticket's detail page (<code>/admin/tickets/{id}</code>). If creation fails, an error toast is displayed with the specific error message.</p>
</div>
<div class="feature-card">
<h3>🔙 Navigation Controls</h3>
<p>A <strong>Back arrow button</strong> in the top-left returns you to the main tickets list. A <strong>Cancel button</strong> at the bottom-right of the sidebar also navigates back. The <strong>Submit button</strong> in the header shows a loading spinner with "Saving..." text during submission and is disabled to prevent duplicate submissions.</p>
</div>