chore: ticket section implement sse

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

@@ -10,7 +10,7 @@ import { TicketHistoryCard } from './components/TicketHistoryCard';
 import { TicketOverviewCard } from './components/TicketOverviewCard';
 import { TicketRepairReportCard } from './components/TicketRepairReportCard';
 import { TicketStatusActions } from './components/TicketStatusActions';
-import { useTicketDetailEvents } from '../hooks/useTicketEvents';
+import { useTicketDetailEvents } from '../hooks/useTicketDetailEvents';
 import { useTicketDetailQuery } from '../hooks/useTicketQueries';
 
 export default function TicketDetailPage() {
@@ -20,7 +20,10 @@ export default function TicketDetailPage() {
   const ticketQuery = useTicketDetailQuery(ticketId);
   const ticket = ticketQuery.data;
 
-  useTicketDetailEvents(ticketId);
+  const liveState = useTicketDetailEvents(
+    ticketId,
+    Boolean(ticketId && ticket && ticket.status !== 'closed'),
+  );
 
   if (ticketQuery.isLoading) {
     return (
@@ -64,7 +67,7 @@ export default function TicketDetailPage() {
         }
       />
 
-      <div className="grid gap-5 xl:grid-cols-[minmax(0,1fr)_380px]">
+      <div className="grid gap-5 xl:grid-cols-[minmax(0,1fr)_480px]">
         <div className="space-y-5">
           <TicketOverviewCard ticket={ticket} />
           <TicketRepairReportCard ticket={ticket} />
@@ -72,7 +75,7 @@ export default function TicketDetailPage() {
         </div>
 
         <div>
-          <TicketStatusActions ticket={ticket} />
+          <TicketStatusActions ticket={ticket} liveState={liveState} />
         </div>
       </div>
     </main>