refactor: video section ui modification

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

@@ -1,11 +1,12 @@
 'use client';
 
 import { useParams, useRouter } from 'next/navigation';
-import { ArrowLeft, Loader2, Ticket } from 'lucide-react';
+import { ArrowLeft, Loader2 } from 'lucide-react';
 
-import { PageHeader } from '@/components/page-header';
 import { Button } from '@/components/ui/button';
 
+import { TicketDetailHeader } from './components/TicketDetailHeader';
+
 import { TicketHistoryCard } from './components/TicketHistoryCard';
 import { TicketOverviewCard } from './components/TicketOverviewCard';
 import { TicketRepairReportCard } from './components/TicketRepairReportCard';
@@ -51,23 +52,9 @@ export default function TicketDetailPage() {
 
   return (
     <main className="relative z-10 space-y-5">
-      <PageHeader
-        title="Ticket Detail"
-        description={`Ticket ID: ${ticket.id}`}
-        icon={Ticket}
-        actions={
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => router.push('/ticket')}
-          >
-            <ArrowLeft />
-            Back
-          </Button>
-        }
-      />
+      <TicketDetailHeader ticket={ticket} />
 
-      <div className="grid gap-5 xl:grid-cols-[minmax(0,1fr)_480px]">
+      <div className="grid gap-5 xl:grid-cols-[minmax(0,7fr)_minmax(0,3fr)]">
         <div className="space-y-5">
           <TicketOverviewCard ticket={ticket} />
           <TicketRepairReportCard ticket={ticket} />