From 68829dc72b788f73447668bef0f721b5a1fc8b64 Mon Sep 17 00:00:00 2001
From: "santasri.pachhal" <santasri.pachhal@sentientgeeks.com>
Date: Mon, 13 Jul 2026 19:27:54 +0530
Subject: [PATCH] feat(tickets): add detection discard workflow

---
 .../components/DetectionDiscardDialog.tsx     | 161 ++++++++++++++++++
 .../TicketClassDetectionPreview.tsx           |  41 ++++-
 .../components/TicketDefectClassTabs.tsx      |   1 +
 .../ticket/hooks/useTicketQueries.ts          |  43 ++++-
 .../(modules)/ticket/queries/ticketKeys.ts    |   4 +-
 src/constants/apiRoutes.ts                    |   3 +
 src/services/api/detection.service.ts         |  21 +++
 src/services/api/index.ts                     |   1 +
 src/types/detection.ts                        |  24 +++
 9 files changed, 295 insertions(+), 4 deletions(-)
 create mode 100644 src/app/(modules)/ticket/[ticketId]/components/DetectionDiscardDialog.tsx
 create mode 100644 src/services/api/detection.service.ts

diff --git a/src/app/(modules)/ticket/[ticketId]/components/DetectionDiscardDialog.tsx b/src/app/(modules)/ticket/[ticketId]/components/DetectionDiscardDialog.tsx
new file mode 100644
index 0000000..aa286a2
--- /dev/null
+++ b/src/app/(modules)/ticket/[ticketId]/components/DetectionDiscardDialog.tsx
@@ -0,0 +1,161 @@
+'use client';
+
+import { useState, type FormEvent } from 'react';
+import { Loader2, Trash2 } from 'lucide-react';
+
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Textarea } from '@/components/ui/textarea';
+import type { DetectionDiscardReason, DiscardDetectionPayload } from '@/types';
+
+const DISCARD_REASON_OPTIONS: Array<{
+  value: DetectionDiscardReason;
+  label: string;
+}> = [
+  { value: 'not_a_defect', label: 'Not a defect' },
+  { value: 'wrong_class', label: 'Wrong classification' },
+  { value: 'duplicate', label: 'Duplicate detection' },
+  { value: 'poor_image_quality', label: 'Poor image quality' },
+  { value: 'incorrect_location', label: 'Incorrect location' },
+  { value: 'already_repaired', label: 'Already repaired' },
+  { value: 'other', label: 'Other' },
+];
+
+interface DetectionDiscardDialogProps {
+  open: boolean;
+  detectionLabel: string;
+  isPending: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSubmit: (payload: DiscardDetectionPayload) => Promise<void>;
+}
+
+export function DetectionDiscardDialog({
+  open,
+  detectionLabel,
+  isPending,
+  onOpenChange,
+  onSubmit,
+}: DetectionDiscardDialogProps) {
+  const [reason, setReason] = useState<DetectionDiscardReason | ''>('');
+  const [comment, setComment] = useState('');
+
+  const resetForm = () => {
+    setReason('');
+    setComment('');
+  };
+
+  const handleOpenChange = (nextOpen: boolean) => {
+    if (isPending) return;
+
+    if (!nextOpen) resetForm();
+    onOpenChange(nextOpen);
+  };
+
+  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    if (!reason || isPending) return;
+
+    try {
+      await onSubmit({
+        reason,
+        comment: comment.trim() || undefined,
+      });
+      resetForm();
+    } catch {
+      // The mutation displays the request error and keeps the dialog open.
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent showCloseButton={!isPending}>
+        <form className="flex min-h-0 flex-1 flex-col" onSubmit={handleSubmit}>
+          <DialogHeader>
+            <DialogTitle>Discard detection</DialogTitle>
+            <DialogDescription>
+              Remove {detectionLabel} from this ticket and record why the AI
+              result is incorrect.
+            </DialogDescription>
+          </DialogHeader>
+
+          <DialogBody className="space-y-5">
+            <div className="space-y-2">
+              <Label htmlFor="discard-reason">Reason</Label>
+              <Select
+                value={reason}
+                onValueChange={(value) =>
+                  setReason(value as DetectionDiscardReason)
+                }
+                disabled={isPending}
+              >
+                <SelectTrigger id="discard-reason" className="w-full">
+                  <SelectValue placeholder="Select a reason" />
+                </SelectTrigger>
+                <SelectContent>
+                  {DISCARD_REASON_OPTIONS.map((option) => (
+                    <SelectItem key={option.value} value={option.value}>
+                      {option.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="space-y-2">
+              <div className="flex items-center justify-between gap-3">
+                <Label htmlFor="discard-comment">Comment</Label>
+                <span className="text-xs text-muted-foreground">
+                  Optional | {comment.length}/500
+                </span>
+              </div>
+              <Textarea
+                id="discard-comment"
+                value={comment}
+                onChange={(event) => setComment(event.target.value)}
+                placeholder="Add details that can help improve future detections"
+                rows={4}
+                maxLength={500}
+                disabled={isPending}
+              />
+            </div>
+          </DialogBody>
+
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => handleOpenChange(false)}
+              disabled={isPending}
+            >
+              Cancel
+            </Button>
+            <Button
+              type="submit"
+              variant="destructive"
+              disabled={!reason || isPending}
+            >
+              {isPending ? <Loader2 className="animate-spin" /> : <Trash2 />}
+              {isPending ? 'Discarding' : 'Discard detection'}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/src/app/(modules)/ticket/[ticketId]/components/TicketClassDetectionPreview.tsx b/src/app/(modules)/ticket/[ticketId]/components/TicketClassDetectionPreview.tsx
index fa7dde2..07c779a 100644
--- a/src/app/(modules)/ticket/[ticketId]/components/TicketClassDetectionPreview.tsx
+++ b/src/app/(modules)/ticket/[ticketId]/components/TicketClassDetectionPreview.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { useEffect, useMemo, useState } from 'react';
-import { AlertTriangle, ChevronLeft, ChevronRight } from 'lucide-react';
+import { AlertTriangle, ChevronLeft, ChevronRight, Trash2 } from 'lucide-react';
 
 import DetectionLocationMap from '@/components/map/detectionLocationMap';
 import { Badge } from '@/components/ui/badge';
@@ -11,9 +11,14 @@ import AnnotatedDetectionImage from '@/components/video/annotatedDetectionImage'
 import { getDefectVisual } from '@/constants/defectVisualConfig';
 import { cn } from '@/lib/utils';
 
-import { useTicketClassDetectionsQuery } from '../../hooks/useTicketQueries';
+import {
+  useDiscardDetectionMutation,
+  useTicketClassDetectionsQuery,
+} from '../../hooks/useTicketQueries';
+import { DetectionDiscardDialog } from './DetectionDiscardDialog';
 
 interface TicketClassDetectionPreviewProps {
+  ticketId: string;
   videoId?: string | null;
   defectClassName: string;
   displayName: string;
@@ -89,12 +94,14 @@ function TicketClassDetectionPreviewSkeleton() {
 }
 
 export function TicketClassDetectionPreview({
+  ticketId,
   videoId,
   defectClassName,
   displayName,
   totalCount,
 }: TicketClassDetectionPreviewProps) {
   const [currentIndex, setCurrentIndex] = useState(0);
+  const [isDiscardDialogOpen, setIsDiscardDialogOpen] = useState(false);
   const visual = getDefectVisual(defectClassName);
   const IssueIcon = visual.icon;
 
@@ -116,6 +123,11 @@ export function TicketClassDetectionPreview({
     videoId ?? undefined,
     queryParams,
   );
+  const discardMutation = useDiscardDetectionMutation(
+    ticketId,
+    videoId ?? undefined,
+    defectClassName,
+  );
   const detectionResult = detectionsQuery.data;
   const activeDetection = detectionResult?.items[0];
   const detectionCount = detectionResult?.total ?? totalCount ?? 0;
@@ -274,6 +286,31 @@ export function TicketClassDetectionPreview({
               },
             ]}
           />
+
+          <div className="flex justify-end">
+            <Button
+              type="button"
+              variant="destructive"
+              onClick={() => setIsDiscardDialogOpen(true)}
+            >
+              <Trash2 />
+              Discard detection
+            </Button>
+          </div>
+
+          <DetectionDiscardDialog
+            open={isDiscardDialogOpen}
+            detectionLabel={activeDetection.detection.display_name}
+            isPending={discardMutation.isPending}
+            onOpenChange={setIsDiscardDialogOpen}
+            onSubmit={async (payload) => {
+              await discardMutation.mutateAsync({
+                detectionId: activeDetection.detection.id,
+                payload,
+              });
+              setIsDiscardDialogOpen(false);
+            }}
+          />
         </>
       )}
     </div>
diff --git a/src/app/(modules)/ticket/[ticketId]/components/TicketDefectClassTabs.tsx b/src/app/(modules)/ticket/[ticketId]/components/TicketDefectClassTabs.tsx
index c87b1ae..a3ce4dc 100644
--- a/src/app/(modules)/ticket/[ticketId]/components/TicketDefectClassTabs.tsx
+++ b/src/app/(modules)/ticket/[ticketId]/components/TicketDefectClassTabs.tsx
@@ -150,6 +150,7 @@ export function TicketDefectClassTabs({
 
           <div className="min-w-0 px-5">
             <TicketClassDetectionPreview
+              ticketId={ticketId}
               videoId={previewVideoId}
               defectClassName={selectedClass}
               displayName={previewDisplayName}
diff --git a/src/app/(modules)/ticket/hooks/useTicketQueries.ts b/src/app/(modules)/ticket/hooks/useTicketQueries.ts
index 19e73d2..2a59126 100644
--- a/src/app/(modules)/ticket/hooks/useTicketQueries.ts
+++ b/src/app/(modules)/ticket/hooks/useTicketQueries.ts
@@ -4,10 +4,11 @@ import { useMemo } from 'react';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { toast } from 'sonner';
 
-import { ticketService, videoService } from '@/services/api';
+import { detectionService, ticketService, videoService } from '@/services/api';
 import type {
   AssignTicketPayload,
   CloseTicketPayload,
+  DiscardDetectionPayload,
   RequestTicketExtensionPayload,
   ReviewTicketExtensionPayload,
   ReviewRepairPayload,
@@ -117,6 +118,46 @@ export function useTicketClassDetectionsQuery(
   });
 }
 
+export function useDiscardDetectionMutation(
+  ticketId: string,
+  videoId: string | undefined,
+  defectClass: string,
+) {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({
+      detectionId,
+      payload,
+    }: {
+      detectionId: number;
+      payload: DiscardDetectionPayload;
+    }) => detectionService.discardDetection(detectionId, payload),
+    onSuccess: async () => {
+      toast.success('Detection discarded');
+
+      await Promise.all([
+        videoId
+          ? queryClient.invalidateQueries({
+              queryKey: ticketKeys.classDetectionLists(videoId),
+            })
+          : Promise.resolve(),
+        queryClient.invalidateQueries({
+          queryKey: ticketKeys.overview(ticketId),
+        }),
+        queryClient.invalidateQueries({
+          queryKey: ticketKeys.classDetail(ticketId, defectClass),
+        }),
+        queryClient.invalidateQueries({
+          queryKey: ticketKeys.defectClasses(ticketId),
+        }),
+        queryClient.invalidateQueries({ queryKey: ticketKeys.lists() }),
+      ]);
+    },
+    onError: () => toast.error('Failed to discard detection'),
+  });
+}
+
 export function useTicketExtensionRequestQuery(
   ticketId: string | undefined,
   assignmentId: number | undefined,
diff --git a/src/app/(modules)/ticket/queries/ticketKeys.ts b/src/app/(modules)/ticket/queries/ticketKeys.ts
index 66bf22e..748c516 100644
--- a/src/app/(modules)/ticket/queries/ticketKeys.ts
+++ b/src/app/(modules)/ticket/queries/ticketKeys.ts
@@ -9,8 +9,10 @@ export const ticketKeys = {
     [...ticketKeys.details(), ticketId, 'overview'] as const,
   classDetail: (ticketId: string, defectClass: string) =>
     [...ticketKeys.details(), ticketId, 'class', defectClass] as const,
+  classDetectionLists: (videoId: string) =>
+    [...ticketKeys.details(), 'video', videoId, 'detections'] as const,
   classDetections: (videoId: string, params: VideoDetectionsParams) =>
-    [...ticketKeys.details(), 'video', videoId, 'detections', params] as const,
+    [...ticketKeys.classDetectionLists(videoId), params] as const,
   defectClasses: (ticketId: string) =>
     [...ticketKeys.details(), ticketId, 'defect-classes'] as const,
   extensionRequest: (ticketId: string, assignmentId: number | undefined) =>
diff --git a/src/constants/apiRoutes.ts b/src/constants/apiRoutes.ts
index b043fd9..4624e0f 100644
--- a/src/constants/apiRoutes.ts
+++ b/src/constants/apiRoutes.ts
@@ -58,6 +58,9 @@ export const API_ROUTES = {
       `/biz/api/v1/results/${id}/annotation-frames`,
     DETECTIONS: (id: string) => `/biz/api/v1/results/${id}/detections`,
   },
+  DETECTIONS: {
+    DISCARD: (id: number) => `/biz/api/v1/detections/${id}/discard`,
+  },
   TICKETS: {
     BASE: '/biz/api/v1/tickets',
     DETAIL: (id: string) => `/biz/api/v1/tickets/${id}`,
diff --git a/src/services/api/detection.service.ts b/src/services/api/detection.service.ts
new file mode 100644
index 0000000..3728ce0
--- /dev/null
+++ b/src/services/api/detection.service.ts
@@ -0,0 +1,21 @@
+import { API_ROUTES } from '@/constants/apiRoutes';
+import type {
+  DiscardDetectionPayload,
+  DiscardDetectionResponse,
+} from '@/types';
+
+import axiosClient from '../axios/axios';
+
+export const detectionService = {
+  discardDetection: async (
+    detectionId: number,
+    payload: DiscardDetectionPayload,
+  ): Promise<DiscardDetectionResponse> => {
+    const response = await axiosClient.post<DiscardDetectionResponse>(
+      API_ROUTES.DETECTIONS.DISCARD(detectionId),
+      payload,
+    );
+
+    return response.data;
+  },
+};
diff --git a/src/services/api/index.ts b/src/services/api/index.ts
index ba92fdc..1e5dfb2 100644
--- a/src/services/api/index.ts
+++ b/src/services/api/index.ts
@@ -3,6 +3,7 @@ export * from './package.service';
 export * from './auth.service';
 export { chainageService } from './chainage.service';
 export * from './video.service';
+export * from './detection.service';
 export * from './permission.service';
 export * from './role.service';
 export * from './user.service';
diff --git a/src/types/detection.ts b/src/types/detection.ts
index a10486b..c81b316 100644
--- a/src/types/detection.ts
+++ b/src/types/detection.ts
@@ -75,6 +75,30 @@ export type VideoDetectionsResponse = {
   items: DetectionResultItem[];
 };
 
+export type DetectionDiscardReason =
+  | 'not_a_defect'
+  | 'wrong_class'
+  | 'duplicate'
+  | 'poor_image_quality'
+  | 'incorrect_location'
+  | 'already_repaired'
+  | 'other';
+
+export type DiscardDetectionPayload = {
+  reason: DetectionDiscardReason;
+  comment?: string;
+};
+
+export type DiscardDetectionResponse = {
+  detection_id: number;
+  video_id: string;
+  status: 'discarded';
+  feedback_id: number;
+  action: 'discarded';
+  ticket_detection_count: number;
+  created_at: string;
+};
+
 export type VideoAnnotationFramesParams = {
   start_time_ms: number;
   end_time_ms: number;