feat(ticket): redesign audit timeline with structured history events

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

@@ -54,29 +54,28 @@ export function TicketClassContentSkeleton() {
         </CardContent>
       </Card>
 
-      <Card>
-        <CardHeader>
+      <div className="space-y-4">
+        <div className="flex items-center gap-2">
+          <Skeleton className="size-5 rounded" />
           <Skeleton className="h-5 w-56" />
-        </CardHeader>
-        <CardContent className="pl-5.5">
-          {Array.from({ length: 3 }).map((_, index) => (
-            <div key={index} className="relative flex gap-4 pb-8 last:pb-0">
-              {index < 2 ? (
-                <span className="absolute top-6 left-2.75 h-[calc(100%-10px)] w-px bg-border" />
-              ) : null}
-              <Skeleton className="relative z-10 mt-0.5 size-6 shrink-0 rounded-full" />
-              <div className="min-w-0 flex-1 space-y-3">
-                <div className="flex flex-wrap items-center gap-3">
-                  <Skeleton className="h-4 w-44" />
-                  <Skeleton className="h-3 w-28" />
-                </div>
-                <Skeleton className="h-3 w-56" />
-                <Skeleton className="h-12 w-full" />
+        </div>
+        {Array.from({ length: 3 }).map((_, index) => (
+          <div key={index} className="relative flex gap-4 pb-8 last:pb-0">
+            {index < 2 ? (
+              <span className="absolute top-6 left-2.75 h-[calc(100%-10px)] w-px bg-border" />
+            ) : null}
+            <Skeleton className="relative z-10 mt-0.5 size-6 shrink-0 rounded-full" />
+            <div className="min-w-0 flex-1 space-y-3">
+              <div className="flex flex-wrap items-center gap-3">
+                <Skeleton className="h-4 w-44" />
+                <Skeleton className="h-3 w-28" />
               </div>
+              <Skeleton className="h-3 w-56" />
+              <Skeleton className="h-12 w-full" />
             </div>
-          ))}
-        </CardContent>
-      </Card>
+          </div>
+        ))}
+      </div>
     </div>
   );
 }