refactor(ticket): extract defect class status metadata

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

@@ -0,0 +1,51 @@
+import { Component } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+import type { TicketDefectClassTicketStatus } from '@/types';
+
+export const DEFECT_CLASS_STATUS_CONFIG: Record<
+  TicketDefectClassTicketStatus,
+  {
+    label: string;
+    iconClassName: string;
+  }
+> = {
+  unassigned: {
+    label: 'Unassigned',
+    iconClassName: 'text-zinc-500',
+  },
+  assigned: {
+    label: 'Assigned',
+    iconClassName: 'text-red-500',
+  },
+  under_review: {
+    label: 'Under Review',
+    iconClassName: 'text-violet-500',
+  },
+  approved: {
+    label: 'Approved',
+    iconClassName: 'text-emerald-500',
+  },
+  rejected: {
+    label: 'Rejected',
+    iconClassName: 'text-orange-500',
+  },
+};
+
+export function DefectClassStatusLegend() {
+  return (
+    <div className="flex flex-wrap items-center gap-2 pt-2">
+      {Object.entries(DEFECT_CLASS_STATUS_CONFIG).map(([status, item]) => (
+        <span
+          key={status}
+          className={cn(
+            'inline-flex items-center gap-1.5 rounded-full border border-border bg-muted/40 px-2.5 py-1 text-xs font-medium text-muted-foreground',
+          )}
+        >
+          <Component className={cn('size-3', item.iconClassName)} />
+          {item.label}
+        </span>
+      ))}
+    </div>
+  );
+}

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

@@ -2,12 +2,14 @@
 
 import { useEffect, useMemo, useState } from 'react';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-import { CheckCircle2 } from 'lucide-react';
+import { Component } from 'lucide-react';
 
 import { Card, CardContent } from '@/components/ui/card';
 import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { cn } from '@/lib/utils';
 
 import { useTicketDefectClassesQuery } from '../../hooks/useTicketQueries';
+import { DEFECT_CLASS_STATUS_CONFIG } from './DefectClassStatusLegend';
 
 interface TicketDefectClassTabsProps {
   ticketId: string;
@@ -49,7 +51,6 @@ export function TicketDefectClassTabs({
 
     nextParams.set('defect_class', className);
     setSelectedClass(className);
-    console.log(className);
     router.replace(`${pathname}?${nextParams.toString()}`, { scroll: false });
   };
 
@@ -86,9 +87,17 @@ export function TicketDefectClassTabs({
               <TabsTrigger
                 key={item.class_name}
                 value={item.class_name}
-                className="group h-9 w-full flex-none justify-start gap-2 rounded-full border border-border bg-muted/50 px-3 text-sm text-muted-foreground shadow-none after:hidden data-[state=active]:border-border data-[state=active]:bg-muted data-[state=active]:font-medium data-[state=active]:text-foreground"
+                className={cn(
+                  'group h-9 w-full flex-none justify-start gap-2 rounded-full border border-border bg-muted/50 px-3 text-sm text-muted-foreground shadow-none after:hidden data-[state=active]:bg-muted data-[state=active]:font-semibold data-[state=active]:text-foreground',
+                )}
               >
-                <CheckCircle2 className="size-3.5 shrink-0 text-muted-foreground group-data-[state=active]:text-foreground" />
+                <Component
+                  className={cn(
+                    'size-3.5 shrink-0',
+                    DEFECT_CLASS_STATUS_CONFIG[item.assignment_status]
+                      .iconClassName,
+                  )}
+                />
                 {item.display_name}
               </TabsTrigger>
             ))}

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">