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

src/types/ticket/actions.ts

@@ -43,23 +43,3 @@ export interface ReviewRepairPayload {
 export interface CloseTicketPayload {
   defect_class: string;
 }
-
-export type TicketDefectClassTicketStatus =
-  | 'unassigned'
-  | 'assigned'
-  | 'under_review'
-  | 'approved'
-  | 'rejected';
-
-export interface TicketDefectClassItem {
-  class_name: string;
-  display_name: string;
-  assignment_status: TicketDefectClassTicketStatus;
-}
-
-export interface TicketDefectClassesResponse {
-  ticket_id: string;
-  video_id: string;
-  ticket_status: TicketDefectClassTicketStatus;
-  defect_classes: TicketDefectClassItem[];
-}

src/types/ticket/defect-class.ts

@@ -0,0 +1,19 @@
+export type TicketDefectClassTicketStatus =
+  | 'unassigned'
+  | 'assigned'
+  | 'under_review'
+  | 'approved'
+  | 'rejected';
+
+export interface TicketDefectClassItem {
+  class_name: string;
+  display_name: string;
+  assignment_status: TicketDefectClassTicketStatus;
+}
+
+export interface TicketDefectClassesResponse {
+  ticket_id: string;
+  video_id: string;
+  ticket_status: TicketDefectClassTicketStatus;
+  defect_classes: TicketDefectClassItem[];
+}

src/types/ticket/detail.ts

@@ -1,4 +1,4 @@
-import type { TicketDefectClassTicketStatus } from './actions';
+import type { TicketDefectClassTicketStatus } from './defect-class';
 import type { TicketStatus } from './status';
 
 export interface TicketActor {
@@ -68,6 +68,7 @@ export interface TicketTimestamps {
 
 export interface TicketDetail {
   id: string;
+  ticket_name?: string;
   video_id: string;
   chainage_id: string | null;
   status: TicketStatus;

src/types/ticket/index.ts

@@ -2,4 +2,5 @@ export * from './status';
 export * from './list';
 export * from './detail';
 export * from './actions';
+export * from './defect-class';
 export * from './events';