refactor: video section ui modification

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

@@ -1,41 +1,33 @@
 'use client';
 
+import { ImageIcon } from 'lucide-react';
+
 import type { TicketDetail } from '@/types';
 
-import { RepairNotesCard } from './repair-report/RepairNotesCard';
 import { RepairProofImagesGrid } from './repair-report/RepairProofImagesGrid';
-import { RepairProofVideoCard } from './repair-report/RepairProofVideoCard';
-import { ReviewerCommentsCard } from './repair-report/ReviewerCommentsCard';
+import { RepairReportPanel } from './repair-report/RepairReportPanel';
+import { RepairVideoComparison } from './repair-report/RepairVideoComparison';
 
 export function TicketRepairReportCard({ ticket }: { ticket: TicketDetail }) {
   const repair = ticket.repair;
 
   return (
-    <section className="space-y-4">
-      <h2 className="text-base font-semibold text-foreground">
-        Evidence & Progress
-      </h2>
+    <section className="space-y-5">
+      <RepairReportPanel ticket={ticket} />
 
-      <div className="space-y-4">
-        <RepairProofVideoCard
-          ticketId={ticket.id}
-          proofVideoUrl={repair?.proof_video_url ?? null}
-          hasRepair={Boolean(repair)}
-        />
+      <RepairVideoComparison ticket={ticket} />
+
+      <div className="space-y-3">
+        <h3 className="flex items-center gap-2 text-base font-semibold">
+          <ImageIcon className="size-5 text-primary" />
+          Repair Images
+        </h3>
 
         <RepairProofImagesGrid
           imageUrls={repair?.proof_image_urls ?? []}
           submittedAt={repair?.submitted_at ?? null}
         />
       </div>
-
-      <div className="grid gap-4 lg:grid-cols-2">
-        <RepairNotesCard notes={repair?.notes ?? null} worker={ticket.worker} />
-        <ReviewerCommentsCard
-          reviewer={ticket.reviewer}
-          status={ticket.status}
-        />
-      </div>
     </section>
   );
 }