refactor: standardize ticket detail card and tab styling

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

@@ -4,12 +4,13 @@ import { useEffect, useMemo, useState } from 'react';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { Component } from 'lucide-react';
 
-import { Card, CardContent } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { DEFECT_CLASS_STATUS_CONFIG } from '@/constants/defectClassStatus';
 import { cn } from '@/lib/utils';
 
 import { useTicketDefectClassesQuery } from '../../hooks/useTicketQueries';
-import { DEFECT_CLASS_STATUS_CONFIG } from './DefectClassStatusLegend';
 
 interface TicketDefectClassTabsProps {
   ticketId: string;
@@ -56,12 +57,15 @@ export function TicketDefectClassTabs({
 
   if (defectClassesQuery.isLoading) {
     return (
-      <Card>
+      <Card className="w-full">
+        <CardHeader>
+          <div className="h-5 w-24 animate-pulse rounded bg-muted" />
+        </CardHeader>
         <CardContent className="flex flex-col gap-2">
           {Array.from({ length: 3 }).map((_, index) => (
             <div
               key={index}
-              className="h-9 w-full animate-pulse rounded-full bg-muted"
+              className="h-11 w-full animate-pulse rounded-lg bg-muted"
             />
           ))}
         </CardContent>
@@ -80,27 +84,45 @@ export function TicketDefectClassTabs({
       orientation="vertical"
       className="w-full"
     >
-      <Card className="w-full py-0">
-        <CardContent className="py-4">
+      <Card className="w-full">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-base">
+            <span>Issues</span>
+            <Badge className="min-w-5 justify-center rounded-full px-1.5 py-0.5 text-xs tabular-nums">
+              {defectClasses.length}
+            </Badge>
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
           <TabsList className="flex h-auto w-full flex-col items-stretch gap-2 bg-transparent p-0">
-            {defectClasses.map((item) => (
-              <TabsTrigger
-                key={item.class_name}
-                value={item.class_name}
-                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',
-                )}
-              >
-                <Component
+            {defectClasses.map((item) => {
+              const statusConfig =
+                DEFECT_CLASS_STATUS_CONFIG[item.assignment_status];
+
+              return (
+                <TabsTrigger
+                  key={item.class_name}
+                  value={item.class_name}
                   className={cn(
-                    'size-3.5 shrink-0',
-                    DEFECT_CLASS_STATUS_CONFIG[item.assignment_status]
-                      .iconClassName,
+                    'group h-auto w-full flex-none items-center justify-between! gap-2 rounded-lg border border-border bg-muted/30 px-3 py-2.5 text-sm text-muted-foreground shadow-none after:hidden',
+                    'data-[state=active]:bg-muted data-[state=active]:text-foreground',
                   )}
-                />
-                {item.display_name}
-              </TabsTrigger>
-            ))}
+                >
+                  <span className="min-w-0 truncate text-left font-medium">
+                    {item.display_name}
+                  </span>
+                  <Badge
+                    className={cn(
+                      'shrink-0 gap-1.5 rounded-full border-0 px-2.5 py-1 text-xs font-medium',
+                      statusConfig.badgeClassName,
+                    )}
+                  >
+                    <Component className="size-3" />
+                    {statusConfig.label}
+                  </Badge>
+                </TabsTrigger>
+              );
+            })}
           </TabsList>
         </CardContent>
       </Card>