From a18eb64dac7b704af03522fff7ae9fd1476c3a1e Mon Sep 17 00:00:00 2001
From: "santasri.pachhal" <santasri.pachhal@sentientgeeks.com>
Date: Fri, 10 Jul 2026 16:12:30 +0530
Subject: [PATCH] feat(ticket): enable circular detection preview navigation

---
 .../TicketClassDetectionPreview.tsx           | 33 ++++++++++---------
 1 file changed, 18 insertions(+), 15 deletions(-)

diff --git a/src/app/(modules)/ticket/[ticketId]/components/TicketClassDetectionPreview.tsx b/src/app/(modules)/ticket/[ticketId]/components/TicketClassDetectionPreview.tsx
index 99d7b98..fa7dde2 100644
--- a/src/app/(modules)/ticket/[ticketId]/components/TicketClassDetectionPreview.tsx
+++ b/src/app/(modules)/ticket/[ticketId]/components/TicketClassDetectionPreview.tsx
@@ -137,11 +137,8 @@ export function TicketClassDetectionPreview({
     }
   }, [currentIndex, detectionCount]);
 
-  const isPreviousDisabled = currentIndex === 0 || detectionsQuery.isLoading;
-  const isNextDisabled =
-    detectionCount === 0 ||
-    currentIndex + 1 >= detectionCount ||
-    detectionsQuery.isLoading;
+  const isNavigationDisabled =
+    detectionCount === 0 || detectionsQuery.isLoading;
 
   return (
     <div className="space-y-4">
@@ -157,9 +154,7 @@ export function TicketClassDetectionPreview({
           </span>
           <div className="min-w-0 space-y-1">
             <div className="flex min-w-0 flex-wrap items-center gap-2">
-              <h3 >
-                {displayName}
-              </h3>
+              <h3>{displayName}</h3>
               <Badge
                 variant="secondary"
                 className={cn(
@@ -181,8 +176,14 @@ export function TicketClassDetectionPreview({
           <Button
             type="button"
             variant="secondary"
-            onClick={() => setCurrentIndex((index) => Math.max(index - 1, 0))}
-            disabled={isPreviousDisabled}
+            onClick={() =>
+              setCurrentIndex((index) =>
+                detectionCount === 0
+                  ? 0
+                  : (index - 1 + detectionCount) % detectionCount,
+              )
+            }
+            disabled={isNavigationDisabled}
             aria-label="Previous detection"
           >
             <ChevronLeft className="size-4" />
@@ -195,8 +196,12 @@ export function TicketClassDetectionPreview({
           <Button
             type="button"
             variant="secondary"
-            onClick={() => setCurrentIndex((index) => index + 1)}
-            disabled={isNextDisabled}
+            onClick={() =>
+              setCurrentIndex((index) =>
+                detectionCount === 0 ? 0 : (index + 1) % detectionCount,
+              )
+            }
+            disabled={isNavigationDisabled}
             aria-label="Next detection"
           >
             <ChevronRight className="size-4" />
@@ -231,9 +236,7 @@ export function TicketClassDetectionPreview({
         <>
           <div className="grid grid-cols-1 items-start gap-4 xl:grid-cols-2">
             <div className="min-w-0 space-y-2">
-              <p className="text-muted-foreground">
-                Detection Image
-              </p>
+              <p className="text-muted-foreground">Detection Image</p>
               <div className="overflow-hidden rounded-lg">
                 <AnnotatedDetectionImage
                   detection={activeDetection}