refactor: standardize ticket detail card and tab styling

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

@@ -2,6 +2,7 @@
 
 import { History, MessageSquareText } from 'lucide-react';
 
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { cn } from '@/lib/utils';
 import type { TicketDetail, TicketHistoryItem, TicketStatus } from '@/types';
 import { formatDate } from '@/utils/date';
@@ -93,31 +94,33 @@ export function TicketHistoryCard({ ticket }: { ticket: TicketDetail }) {
   const history = ticket.history ?? [];
 
   return (
-    <section className="rounded-xl border bg-card p-5">
-      <div className="mb-5 flex items-center gap-2">
-        <History className="size-5 text-primary" />
-        <h2 className="text-base font-semibold text-foreground">
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <History className="size-5 text-primary" />
           Audit & Lifecycle Timeline
-        </h2>
-      </div>
+        </CardTitle>
+      </CardHeader>
 
-      {history.length ? (
-        <div className={cn('pl-0.5')}>
-          {history.map((item, index) => (
-            <HistoryEntry
-              key={item.id}
-              item={item}
-              isLast={index === history.length - 1}
-            />
-          ))}
-        </div>
-      ) : (
-        <div className="rounded-lg border border-dashed border-border/80 bg-muted/10 px-4 py-8 text-center">
-          <p className="text-sm font-medium text-muted-foreground">
-            No timeline entries yet
-          </p>
-        </div>
-      )}
-    </section>
+      <CardContent>
+        {history.length ? (
+          <div className="pl-0.5">
+            {history.map((item, index) => (
+              <HistoryEntry
+                key={item.id}
+                item={item}
+                isLast={index === history.length - 1}
+              />
+            ))}
+          </div>
+        ) : (
+          <div className="rounded-lg border border-dashed border-border/80 bg-muted/10 px-4 py-8 text-center">
+            <p className="text-sm font-medium text-muted-foreground">
+              No timeline entries yet
+            </p>
+          </div>
+        )}
+      </CardContent>
+    </Card>
   );
 }