refactor(ticket): extract defect class status metadata

src/app/(modules)/ticket/[ticketId]/components/TicketDetailHeader.tsx

@@ -10,9 +10,11 @@ import { PermissionGuard } from '@/guards';
 import type { TicketDetail } from '@/types';
 
 import { TicketStatusBadge } from '../../components/TicketStatusBadge';
+import { DefectClassStatusLegend } from './DefectClassStatusLegend';
 
 export function TicketDetailHeader({ ticket }: { ticket: TicketDetail }) {
   const router = useRouter();
+  const ticketLabel = ticket.ticket_name
 
   return (
     <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
@@ -23,7 +25,8 @@ export function TicketDetailHeader({ ticket }: { ticket: TicketDetail }) {
           </h1>
           <TicketStatusBadge status={ticket.status} />
         </div>
-        <p className="text-xs ">Ticket ID: {ticket.id}</p>
+        <p className="text-xs ">Ticket: {ticketLabel}</p>
+        <DefectClassStatusLegend />
       </div>
 
       <div className="flex shrink-0 items-center gap-2">