chore: ticket section implement sse

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

@@ -7,13 +7,7 @@ import type { TicketDetail, TicketHistoryItem, TicketStatus } from '@/types';
 
 import { formatTicketStatus } from '../../components/TicketStatusBadge';
 
-function formatDate(value: string | null | undefined) {
-  if (!value) return '-';
-  return new Intl.DateTimeFormat('en-IN', {
-    dateStyle: 'medium',
-    timeStyle: 'short',
-  }).format(new Date(value));
-}
+import { formatDate } from '@/utils/date';
 
 function getActorLabel(item: TicketHistoryItem) {
   return item.actor?.name || item.actor?.email || 'System';

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

@@ -5,13 +5,7 @@ import type { TicketActor, TicketDetail } from '@/types';
 
 import { TicketStatusBadge } from '../../components/TicketStatusBadge';
 
-function formatDate(value: string | null | undefined) {
-  if (!value) return '-';
-  return new Intl.DateTimeFormat('en-IN', {
-    dateStyle: 'medium',
-    timeStyle: 'short',
-  }).format(new Date(value));
-}
+import { formatDate } from '@/utils/date';
 
 function OverviewMeta({
   label,

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

@@ -1,23 +1,65 @@
 'use client';
 
+import { PERMISSIONS } from '@/constants/permissions';
+import { PermissionGuard } from '@/guards';
 import type { TicketDetail } from '@/types';
+import type { TicketDetailLiveState } from '../../hooks/useTicketDetailEvents';
 
 import { AssignTicketAction } from './actions/AssignTicketAction';
 import { NoTicketAction } from './actions/NoTicketAction';
+import { ProcessingTicketAction } from './actions/ProcessingTicketAction';
 import { ReviewRepairAction } from './actions/ReviewRepairAction';
 import { SubmitRepairAction } from './actions/SubmitRepairAction';
 
-export function TicketStatusActions({ ticket }: { ticket: TicketDetail }) {
+interface TicketStatusActionsProps {
+  ticket: TicketDetail;
+  liveState: TicketDetailLiveState;
+}
+
+export function TicketStatusActions({
+  ticket,
+  liveState,
+}: TicketStatusActionsProps) {
+  if (ticket.status === 'processing') {
+    return (
+      <ProcessingTicketAction
+        progress={liveState.progress}
+        errorMessage={liveState.errorMessage}
+      />
+    );
+  }
+
   if (ticket.status === 'unassigned') {
-    return <AssignTicketAction ticket={ticket} />;
+    return (
+      <PermissionGuard
+        permissions={PERMISSIONS.TICKET.ASSIGN}
+        fallback={<NoTicketAction status={ticket.status} />}
+      >
+        <AssignTicketAction ticket={ticket} />
+      </PermissionGuard>
+    );
   }
 
   if (ticket.status === 'assigned') {
-    return <SubmitRepairAction ticket={ticket} />;
+    return (
+      <PermissionGuard
+        permissions={PERMISSIONS.TICKET.WORK}
+        fallback={<NoTicketAction status={ticket.status} />}
+      >
+        <SubmitRepairAction ticket={ticket} />
+      </PermissionGuard>
+    );
   }
 
   if (ticket.status === 'under_review') {
-    return <ReviewRepairAction ticket={ticket} />;
+    return (
+      <PermissionGuard
+        permissions={PERMISSIONS.TICKET.REVIEW}
+        fallback={<NoTicketAction status={ticket.status} />}
+      >
+        <ReviewRepairAction ticket={ticket} />
+      </PermissionGuard>
+    );
   }
 
   return <NoTicketAction status={ticket.status} />;

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

@@ -0,0 +1,54 @@
+'use client';
+
+import { AlertCircle, Loader2 } from 'lucide-react';
+
+import { Progress } from '@/components/ui/progress';
+import type { TicketProcessingProgress } from '../../../hooks/useTicketDetailEvents';
+
+import { TicketActionCard } from './TicketActionCard';
+
+interface ProcessingTicketActionProps {
+  progress: TicketProcessingProgress | null;
+  errorMessage: string | null;
+}
+
+function getProgressMessage(progress: TicketProcessingProgress | null) {
+  if (!progress) return 'Waiting for analysis updates.';
+  if (progress.progress >= 95) {
+    return progress.message ?? 'Rendering annotated video...';
+  }
+  return progress.message ?? 'Processing video.';
+}
+
+export function ProcessingTicketAction({
+  progress,
+  errorMessage,
+}: ProcessingTicketActionProps) {
+  const progressValue = progress ? progress.progress : 0;
+  const hasProgress = Boolean(progress);
+
+  return (
+    <TicketActionCard icon={Loader2} title="Analyzing Video">
+      <div className="space-y-4">
+        <div className="space-y-2">
+          <div className="flex items-center justify-between gap-3 text-sm">
+            <span className="font-medium text-foreground">
+              {getProgressMessage(progress)}
+            </span>
+            <span className="shrink-0 text-muted-foreground">
+              {hasProgress ? `${Math.round(progressValue)}%` : '--'}
+            </span>
+          </div>
+          <Progress value={hasProgress ? progressValue : 0} />
+        </div>
+
+        {errorMessage && (
+          <div className="flex gap-2 rounded-md border border-destructive/25 bg-destructive/10 p-3 text-sm text-destructive">
+            <AlertCircle className="mt-0.5 size-4 shrink-0" />
+            <span>{errorMessage}</span>
+          </div>
+        )}
+      </div>
+    </TicketActionCard>
+  );
+}

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>

src/app/(modules)/ticket/components/TicketColumns.tsx

@@ -6,14 +6,7 @@ import type { ColumnDef } from '@tanstack/react-table';
 import type { TicketListItem } from '@/types';
 
 import { TicketStatusBadge } from './TicketStatusBadge';
-
-function formatDate(value: string | null | undefined) {
-  if (!value) return '-';
-  return new Intl.DateTimeFormat('en-IN', {
-    dateStyle: 'medium',
-    timeStyle: 'short',
-  }).format(new Date(value));
-}
+import { formatDate } from '@/utils/date';
 
 export function useTicketColumns(): ColumnDef<TicketListItem>[] {
   return useMemo(
@@ -32,21 +25,28 @@ export function useTicketColumns(): ColumnDef<TicketListItem>[] {
         size: 150,
         cell: ({ row }) => <TicketStatusBadge status={row.original.status} />,
       },
+      {
+        accessorKey: 'chainage_name',
+        header: 'Segment',
+        size: 180,
+        cell: ({ row }) => row.original.chainage_name || 'N/A',
+      },
       {
         accessorKey: 'detection_count',
         header: 'Detections',
         size: 120,
       },
       {
-        accessorKey: 'assigned_to_email',
+        accessorKey: 'assigned_to_name',
         header: 'Assigned To',
         size: 220,
-        cell: ({ row }) => row.original.assigned_to_email || '-',
+        cell: ({ row }) => row.original.assigned_to_name || 'N/A',
       },
       {
-        accessorKey: 'created_by_email',
+        accessorKey: 'created_by_name',
         header: 'Uploaded By',
         size: 220,
+        cell: ({ row }) => row.original.created_by_name || 'N/A',
       },
       {
         accessorKey: 'updated_at',

src/app/(modules)/ticket/components/TicketTable.tsx

@@ -2,7 +2,7 @@
 
 import type { ReactNode } from 'react';
 import type { ColumnDef } from '@tanstack/react-table';
-import { BarChart3, Eye, ChartPie } from 'lucide-react';
+import { Eye } from 'lucide-react';
 
 import { DataTable } from '@/components/data-table';
 import type { TicketListItem } from '@/types';
@@ -18,7 +18,6 @@ interface TicketTableProps {
   onPageChange: (skip: number) => void;
   onLimitChange: (limit: number) => void;
   onView: (ticket: TicketListItem) => void;
-  onShowAnalytics: (ticket: TicketListItem) => void;
 }
 
 export function TicketTable({
@@ -32,7 +31,6 @@ export function TicketTable({
   onPageChange,
   onLimitChange,
   onView,
-  onShowAnalytics,
 }: TicketTableProps) {
   return (
     <DataTable
@@ -49,11 +47,6 @@ export function TicketTable({
           icon: <Eye className="size-4" />,
           onClick: onView,
         },
-        {
-          label: 'Show Analytics',
-          icon: <ChartPie className="size-4" />,
-          onClick: onShowAnalytics,
-        },
       ]}
       pagination={{
         skip,

src/app/(modules)/ticket/hooks/useTenantTicketTableEvents.ts

@@ -0,0 +1,167 @@
+'use client';
+
+import { useCallback, useMemo } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+
+import { API_ROUTES } from '@/constants/apiRoutes';
+import { useSseWithToken } from '@/hooks/sse/useSseWithToken';
+import { ticketService } from '@/services/api';
+import type {
+  TicketListItem,
+  TicketListParams,
+  TicketListResponse,
+  TicketTableStatusEvent,
+} from '@/types';
+
+import { ticketKeys } from '../queries/ticketKeys';
+
+function patchTicketLists(
+  current: TicketListResponse | undefined,
+  event: TicketTableStatusEvent,
+  params?: TicketListParams,
+) {
+  if (!current || !event.id) return current;
+
+  const nextRow = buildTicketListItem(event);
+  const existingIndex = current.items.findIndex(
+    (ticket) => ticket.id === event.id,
+  );
+
+  if (existingIndex >= 0) {
+    return {
+      ...current,
+      items: current.items.map((ticket) =>
+        ticket.id === event.id ? mergeTicketListItem(ticket, event) : ticket,
+      ),
+    };
+  }
+
+  if (event.kind !== 'created') return current;
+  if (!shouldCountCreatedTicket(event, params)) return current;
+
+  if (!nextRow || !isFirstPage(params)) {
+    return {
+      ...current,
+      total: current.total + 1,
+    };
+  }
+
+  const pageLimit = params?.limit ?? current.items.length + 1;
+
+  return {
+    ...current,
+    items: [nextRow, ...current.items].slice(0, pageLimit),
+    total: current.total + 1,
+  };
+}
+
+function shouldCountCreatedTicket(
+  event: TicketTableStatusEvent,
+  params?: TicketListParams,
+) {
+  if (params?.status && event.status !== params.status) return false;
+  if (params?.chainage_id && event.chainage_id !== params.chainage_id) {
+    return false;
+  }
+
+  return true;
+}
+
+function isFirstPage(params?: TicketListParams) {
+  return (params?.skip ?? 0) === 0;
+}
+
+function getTicketListParams(queryKey: readonly unknown[]) {
+  const params = queryKey[2];
+
+  if (!params || typeof params !== 'object' || Array.isArray(params)) {
+    return undefined;
+  }
+
+  return params as TicketListParams;
+}
+
+function buildTicketListItem(
+  event: TicketTableStatusEvent,
+): TicketListItem | null {
+  if (
+    !event.id ||
+    !event.status ||
+    event.detection_count === undefined ||
+    !event.updated_at
+  ) {
+    return null;
+  }
+
+  return {
+    id: event.id,
+    chainage_id: event.chainage_id ?? null,
+    chainage_name: event.chainage_name ?? null,
+    status: event.status,
+    assigned_to_name: event.assigned_to_name ?? null,
+    detection_count: event.detection_count,
+    created_by_name: event.created_by_name ?? null,
+    created_at: event.created_at ?? event.updated_at,
+    updated_at: event.updated_at,
+  };
+}
+
+function mergeTicketListItem(
+  current: TicketListItem,
+  event: TicketTableStatusEvent,
+): TicketListItem {
+  return {
+    ...current,
+    chainage_id: event.chainage_id ?? current.chainage_id,
+    chainage_name: event.chainage_name ?? current.chainage_name,
+    status: event.status ?? current.status,
+    assigned_to_name: event.assigned_to_name ?? current.assigned_to_name,
+    detection_count: event.detection_count ?? current.detection_count,
+    created_by_name: event.created_by_name ?? current.created_by_name,
+    created_at: event.created_at ?? current.created_at,
+    updated_at: event.updated_at ?? current.updated_at,
+  };
+}
+
+export function useTenantTicketTableEvents(enabled = true) {
+  const queryClient = useQueryClient();
+
+  const events = useMemo(
+    () => ({
+      ticket_status: (event: TicketTableStatusEvent) => {
+        queryClient
+          .getQueryCache()
+          .findAll({ queryKey: ticketKeys.lists() })
+          .forEach((query) => {
+            queryClient.setQueryData<TicketListResponse>(
+              query.queryKey,
+              (current) =>
+                patchTicketLists(
+                  current,
+                  event,
+                  getTicketListParams(query.queryKey),
+                ),
+            );
+          });
+      },
+    }),
+    [queryClient],
+  );
+
+  const getPath = useCallback(
+    (token: string) => API_ROUTES.TICKET_EVENTS.TENANT(token),
+    [],
+  );
+
+  const onConnectionError = useCallback(() => {
+    queryClient.invalidateQueries({ queryKey: ticketKeys.lists() });
+  }, [queryClient]);
+
+  useSseWithToken({
+    enabled,
+    getToken: ticketService.createTenantTicketEventsToken,
+    getPath,
+    events,
+    onConnectionError,
+  });
+}

src/app/(modules)/ticket/hooks/useTicketDetailEvents.ts

@@ -0,0 +1,119 @@
+'use client';
+
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+
+import { API_ROUTES } from '@/constants/apiRoutes';
+import { useSseWithToken } from '@/hooks/sse/useSseWithToken';
+import { ticketService } from '@/services/api';
+import type {
+  TicketDetailStatusEvent,
+  TicketProgressEvent,
+  TicketStreamErrorEvent,
+} from '@/types';
+
+import { ticketKeys } from '../queries/ticketKeys';
+
+export interface TicketProcessingProgress {
+  progress: number;
+  message: string | null;
+}
+
+export interface TicketDetailLiveState {
+  progress: TicketProcessingProgress | null;
+  errorMessage: string | null;
+}
+
+const TICKET_DETAIL_RECONNECT_EVENTS = ['error'] as const;
+
+function isHeartbeatEvent(event: { type?: string } | null | undefined) {
+  return event?.type === 'heartbeat';
+}
+
+export function useTicketDetailEvents(
+  ticketId: string | undefined,
+  enabled = true,
+): TicketDetailLiveState {
+  const queryClient = useQueryClient();
+  const [progress, setProgress] = useState<TicketProcessingProgress | null>(
+    null,
+  );
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+  const refetchTicket = useCallback(() => {
+    if (!ticketId) return;
+
+    queryClient.refetchQueries({ queryKey: ticketKeys.detail(ticketId) });
+    queryClient.invalidateQueries({ queryKey: ticketKeys.lists() });
+  }, [queryClient, ticketId]);
+
+  const getToken = useCallback(
+    () => ticketService.createTicketEventsToken(ticketId as string),
+    [ticketId],
+  );
+
+  const getPath = useCallback(
+    (token: string) =>
+      API_ROUTES.TICKETS.DETAIL_EVENTS(ticketId as string, token),
+    [ticketId],
+  );
+
+  const events = useMemo(
+    () => ({
+      ticket_status: (event: TicketDetailStatusEvent) => {
+        if (isHeartbeatEvent(event)) return;
+        refetchTicket();
+      },
+      progress: (event: TicketProgressEvent) => {
+        setErrorMessage(null);
+        setProgress({
+          progress: event.progress,
+          message: event.message,
+        });
+      },
+      complete: (event: TicketProgressEvent) => {
+        setErrorMessage(null);
+        setProgress({
+          progress: 100,
+          message: event.message,
+        });
+        refetchTicket();
+      },
+      error: (event: TicketStreamErrorEvent) => {
+        setErrorMessage(
+          event.message ?? 'Live ticket updates disconnected. Reconnecting...',
+        );
+      },
+      heartbeat: () => undefined,
+    }),
+    [refetchTicket],
+  );
+
+  const shouldStop = useCallback(
+    (eventName: keyof typeof events, event: unknown) =>
+      eventName === 'ticket_status' &&
+      (event as TicketDetailStatusEvent).status === 'closed',
+    [],
+  );
+
+  const onConnectionError = useCallback(() => {
+    setErrorMessage('Live ticket updates disconnected. Reconnecting...');
+  }, []);
+
+  useEffect(() => {
+    setProgress(null);
+    setErrorMessage(null);
+  }, [ticketId]);
+
+  useSseWithToken({
+    enabled: Boolean(enabled && ticketId),
+    getToken,
+    getPath,
+    events,
+    reconnectOnEvents: TICKET_DETAIL_RECONNECT_EVENTS,
+    shouldStop,
+    onConnectionError,
+  });
+
+  return { progress, errorMessage };
+}

src/app/(modules)/ticket/hooks/useTicketEvents.ts

@@ -1,159 +0,0 @@
-'use client';
-
-import { useEffect } from 'react';
-import { useQueryClient } from '@tanstack/react-query';
-
-import { API_ROUTES } from '@/constants/apiRoutes';
-import { ticketService } from '@/services/api';
-import { sseService } from '@/services/sse';
-import type {
-  TicketDetail,
-  TicketListResponse,
-  TicketProgressEvent,
-  TicketStatusEvent,
-} from '@/types';
-
-import { ticketKeys } from '../queries/ticketKeys';
-
-function getTicketEventId(event: TicketStatusEvent) {
-  return event.id ?? event.ticket_id;
-}
-
-function mergeTicketDetail(
-  current: TicketDetail | undefined,
-  event: TicketStatusEvent,
-) {
-  if (!current) return current;
-
-  const eventId = getTicketEventId(event);
-  if (eventId && eventId !== current.id) return current;
-
-  return {
-    ...current,
-    ...event,
-    id: current.id,
-    history: event.history ?? current.history,
-  };
-}
-
-function patchTicketLists(
-  current: TicketListResponse | undefined,
-  event: TicketStatusEvent,
-) {
-  const eventId = getTicketEventId(event);
-  if (!current || !eventId) return current;
-
-  return {
-    ...current,
-    items: current.items.map((ticket) =>
-      ticket.id === eventId
-        ? {
-            ...ticket,
-            status: event.status ?? ticket.status,
-            updated_at: event.timestamps?.updated_at ?? ticket.updated_at,
-            chainage_id: event.chainage_id ?? ticket.chainage_id,
-            video_id: event.video_id ?? ticket.video_id,
-          }
-        : ticket,
-    ),
-  };
-}
-
-export function useTenantTicketTableEvents(enabled = true) {
-  const queryClient = useQueryClient();
-
-  useEffect(() => {
-    if (!enabled) return;
-
-    let closed = false;
-    let closeConnection: (() => void) | undefined;
-
-    ticketService
-      .createTenantTicketEventsToken()
-      .then(({ sse_token }) => {
-        if (closed) return;
-
-        const connection = sseService.connect(
-          API_ROUTES.TICKET_EVENTS.TENANT(sse_token),
-          {
-            ticket_status: (event: TicketStatusEvent) => {
-              queryClient.setQueriesData<TicketListResponse>(
-                { queryKey: ticketKeys.lists() },
-                (current) => patchTicketLists(current, event),
-              );
-            },
-          },
-        );
-
-        closeConnection = connection.close;
-      })
-      .catch(() => {
-        queryClient.invalidateQueries({ queryKey: ticketKeys.lists() });
-      });
-
-    return () => {
-      closed = true;
-      closeConnection?.();
-    };
-  }, [enabled, queryClient]);
-}
-
-export function useTicketDetailEvents(
-  ticketId: string | undefined,
-  enabled = true,
-) {
-  const queryClient = useQueryClient();
-
-  useEffect(() => {
-    if (!enabled || !ticketId) return;
-
-    let closed = false;
-    let closeConnection: (() => void) | undefined;
-
-    ticketService
-      .createTicketEventsToken(ticketId)
-      .then(({ sse_token }) => {
-        if (closed) return;
-
-        const connection = sseService.connect(
-          API_ROUTES.TICKETS.DETAIL_EVENTS(ticketId, sse_token),
-          {
-            ticket_status: (event: TicketStatusEvent) => {
-              queryClient.setQueryData<TicketDetail>(
-                ticketKeys.detail(ticketId),
-                (current) => mergeTicketDetail(current, event),
-              );
-              queryClient.invalidateQueries({ queryKey: ticketKeys.lists() });
-            },
-            progress: (event: TicketProgressEvent) => {
-              queryClient.setQueryData<TicketDetail>(
-                ticketKeys.detail(ticketId),
-                (current) =>
-                  current && event.status
-                    ? { ...current, status: current.status }
-                    : current,
-              );
-            },
-            complete: () => {
-              queryClient.invalidateQueries({
-                queryKey: ticketKeys.detail(ticketId),
-              });
-              queryClient.invalidateQueries({ queryKey: ticketKeys.lists() });
-            },
-          },
-        );
-
-        closeConnection = connection.close;
-      })
-      .catch(() => {
-        queryClient.invalidateQueries({
-          queryKey: ticketKeys.detail(ticketId),
-        });
-      });
-
-    return () => {
-      closed = true;
-      closeConnection?.();
-    };
-  }, [enabled, queryClient, ticketId]);
-}

src/app/(modules)/ticket/hooks/useTicketQueries.ts

@@ -17,6 +17,8 @@ import type {
 
 import { ticketKeys } from '../queries/ticketKeys';
 
+const TICKET_TABLE_REFRESH_MS = 5 * 60 * 1000;
+
 interface UseTicketsQueryParams {
   skip: number;
   limit: number;
@@ -48,6 +50,8 @@ export function useTicketsQuery(params: UseTicketsQueryParams) {
   return useQuery({
     queryKey: ticketKeys.list(listParams),
     queryFn: () => ticketService.getTickets(listParams),
+    staleTime: TICKET_TABLE_REFRESH_MS,
+    refetchInterval: TICKET_TABLE_REFRESH_MS,
   });
 }
 

src/app/(modules)/ticket/page.tsx

@@ -9,7 +9,7 @@ import type { TicketListItem, TicketStatus } from '@/types';
 import { TicketFilters } from './components/TicketFilters';
 import { TicketTable } from './components/TicketTable';
 import { useTicketColumns } from './components/TicketColumns';
-import { useTenantTicketTableEvents } from './hooks/useTicketEvents';
+import { useTenantTicketTableEvents } from './hooks/useTenantTicketTableEvents';
 import { useTicketsQuery } from './hooks/useTicketQueries';
 
 export default function TicketPage() {
@@ -49,13 +49,6 @@ export default function TicketPage() {
     [router],
   );
 
-  const handleShowAnalytics = useCallback(
-    (ticket: TicketListItem) => {
-      router.push(`/results/${ticket.video_id}`);
-    },
-    [router],
-  );
-
   const toolbar = useMemo(
     () => (
       <TicketFilters
@@ -87,7 +80,6 @@ export default function TicketPage() {
         onPageChange={setSkip}
         onLimitChange={setLimit}
         onView={handleView}
-        onShowAnalytics={handleShowAnalytics}
       />
     </main>
   );