feat(ticket): add paginated class detection preview with image and map

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

@@ -4,7 +4,7 @@ import { useMemo } from 'react';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { toast } from 'sonner';
 
-import { ticketService } from '@/services/api';
+import { ticketService, videoService } from '@/services/api';
 import type {
   AssignTicketPayload,
   CloseTicketPayload,
@@ -15,6 +15,7 @@ import type {
   SubmitRepairUploadPayload,
   TicketDetail,
   TicketListParams,
+  VideoDetectionsParams,
 } from '@/types';
 
 import { ticketKeys } from '../queries/ticketKeys';
@@ -85,6 +86,37 @@ export function useTicketDefectClassesQuery(ticketId: string | undefined) {
   });
 }
 
+export function useTicketClassDetectionsQuery(
+  videoId: string | undefined,
+  params: VideoDetectionsParams,
+) {
+  const queryParams = useMemo(
+    () => ({
+      skip: params.skip ?? 0,
+      limit: params.limit ?? 1,
+      class_name: params.class_name,
+      min_confidence: params.min_confidence,
+      sort: params.sort ?? 'timestamp_asc',
+      search: params.search,
+    }),
+    [
+      params.class_name,
+      params.limit,
+      params.min_confidence,
+      params.search,
+      params.skip,
+      params.sort,
+    ],
+  );
+
+  return useQuery({
+    queryKey: ticketKeys.classDetections(videoId ?? '', queryParams),
+    queryFn: () =>
+      videoService.getVideoDetections(videoId as string, queryParams),
+    enabled: Boolean(videoId && queryParams.class_name),
+  });
+}
+
 export function useTicketExtensionRequestQuery(
   ticketId: string | undefined,
   assignmentId: number | undefined,