fix(auth): prevent logout on transient API failures

src/app/(modules)/plans/components/PlanSheet.tsx

@@ -67,7 +67,7 @@ export function PlanSheet({
 
   return (
     <Sheet open={open} onOpenChange={onOpenChange}>
-      <SheetContent className="w-full gap-0 p-0 sm:max-w-3xl">
+      <SheetContent className="w-full! gap-0 p-0 sm:max-w-3xl! lg:max-w-4xl!">
         <SheetHeader className="shrink-0 border-b px-6 py-4 pr-12">
           <SheetTitle className="text-lg leading-none font-semibold tracking-tight">
             {planId ? 'Edit Plan' : 'Create Plan'}
@@ -77,7 +77,11 @@ export function PlanSheet({
           </SheetDescription>
         </SheetHeader>
 
-        <form noValidate onSubmit={onSubmit} className="flex min-h-0 flex-1 flex-col">
+        <form
+          noValidate
+          onSubmit={onSubmit}
+          className="flex min-h-0 flex-1 flex-col"
+        >
           <div className="flex-1 space-y-5 overflow-y-auto px-6 py-4">
             <div className="grid gap-4 md:grid-cols-2">
               <FormField

src/app/(modules)/roles/components/RoleSheet.tsx

@@ -62,7 +62,7 @@ export function RoleSheet({
     <Sheet open={open} onOpenChange={onOpenChange}>
       <SheetContent
         side="right"
-        className="flex h-full flex-col gap-0 p-0 sm:max-w-3xl lg:max-w-2xl"
+        className="flex h-full w-full! flex-col gap-0 p-0 sm:max-w-3xl!"
       >
         <SheetHeader className="shrink-0 border-b px-6 py-4 pr-12">
           <SheetTitle className="text-lg leading-none font-semibold tracking-tight">
@@ -73,7 +73,11 @@ export function RoleSheet({
           </SheetDescription>
         </SheetHeader>
 
-        <form noValidate onSubmit={onSubmit} className="flex min-h-0 flex-1 flex-col">
+        <form
+          noValidate
+          onSubmit={onSubmit}
+          className="flex min-h-0 flex-1 flex-col"
+        >
           <div className="flex-1 space-y-5 overflow-y-auto px-6 py-4">
             <div className="grid gap-4 md:grid-cols-2">
               <FormField

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>
+  );
+}

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

@@ -1,85 +1,71 @@
 import { Card, CardContent, CardHeader } from '@/components/ui/card';
 import { Skeleton } from '@/components/ui/skeleton';
+import { Timeline, TimelineItem } from '@/components/ui/timeline';
+
+function TimelineEntrySkeleton({
+  index,
+  isLast,
+}: {
+  index: number;
+  isLast: boolean;
+}) {
+  return (
+    <TimelineItem
+      layout="left"
+      isLast={isLast}
+      opposite={
+        <div className="space-y-2">
+          <Skeleton className="ml-auto h-4 w-16" />
+          <Skeleton className="ml-auto h-3 w-12" />
+        </div>
+      }
+      marker={<Skeleton className="size-4 rounded-full" />}
+    >
+      <div
+        className={
+          index === 0
+            ? 'rounded-lg border border-dashed border-primary/25 bg-primary/5 px-4 py-3.5'
+            : 'rounded-lg border bg-card p-4'
+        }
+      >
+        {index === 0 ? <Skeleton className="h-5 w-28 rounded-lg" /> : null}
+        <Skeleton className={index === 0 ? 'mt-3 h-4 w-44' : 'h-4 w-44'} />
+        {index === 0 ? (
+          <Skeleton className="mt-2 h-3 w-full max-w-md" />
+        ) : (
+          <>
+            <div className="mt-3 flex items-center gap-3">
+              <Skeleton className="size-9 rounded-full" />
+              <div className="min-w-0 flex-1 space-y-2">
+                <Skeleton className="h-4 w-36" />
+                <Skeleton className="h-3 w-48 max-w-full" />
+              </div>
+            </div>
+            <Skeleton className="mt-3 h-16 w-full rounded-lg" />
+          </>
+        )}
+      </div>
+    </TimelineItem>
+  );
+}
 
 export function TicketClassContentSkeleton() {
   return (
-    <div className="space-y-5" aria-label="Loading defect class details">
-      <Card>
-        <CardHeader className="sm:grid-cols-[1fr_auto]">
-          <Skeleton className="h-5 w-36" />
-          <Skeleton className="h-3 w-32 sm:col-start-2 sm:row-start-1" />
-        </CardHeader>
-        <CardContent className="space-y-5">
-          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-            {Array.from({ length: 2 }).map((_, index) => (
-              <div key={index} className="space-y-1">
-                <Skeleton className="h-3 w-20" />
-                <Skeleton className="h-4 w-36" />
-              </div>
-            ))}
-          </div>
-          <div className="space-y-2">
-            <Skeleton className="h-3 w-24" />
-            <div className="rounded-lg border bg-muted/15 px-4 py-3">
-              <Skeleton className="h-4 w-full" />
-              <Skeleton className="mt-2 h-4 w-3/4" />
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-
-      <Card>
-        <CardHeader>
-          <Skeleton className="h-5 w-40" />
-        </CardHeader>
-        <CardContent className="grid grid-cols-1 gap-4 lg:grid-cols-2">
-          <Skeleton className="aspect-video w-full rounded-lg" />
-          <Skeleton className="aspect-video w-full rounded-lg" />
-        </CardContent>
-      </Card>
-
-      <Card>
-        <CardHeader>
-          <Skeleton className="h-5 w-32" />
-        </CardHeader>
-        <CardContent>
-          <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5">
-            {Array.from({ length: 5 }).map((_, index) => (
-              <div key={index} className="space-y-2 rounded-lg border p-2">
-                <Skeleton className="aspect-4/3 w-full rounded-lg" />
-                <Skeleton className="h-3 w-16" />
-              </div>
-            ))}
-          </div>
-        </CardContent>
-      </Card>
-
-      <Card>
-        <CardHeader>
+    <div className="space-y-4" aria-label="Loading defect class details">
       <div className="flex items-center gap-2">
         <Skeleton className="size-5 rounded-lg" />
-            <Skeleton className="h-5 w-56" />
+        <Skeleton className="h-5 w-56 max-w-full" />
       </div>
-        </CardHeader>
-        <CardContent>
+
+      <Timeline>
         {Array.from({ length: 3 }).map((_, index) => (
-            <div key={index} className="relative flex gap-4 pb-8 last:pb-0">
-              {index < 2 ? (
-                <span className="absolute top-6 left-2.75 h-[calc(100%-10px)] w-px bg-border" />
-              ) : null}
-              <Skeleton className="relative z-10 mt-0.5 size-6 shrink-0 rounded-full" />
-              <div className="min-w-0 flex-1 space-y-3">
-                <div className="flex flex-wrap items-center gap-3">
-                  <Skeleton className="h-4 w-44" />
-                  <Skeleton className="h-3 w-28" />
-                </div>
-                <Skeleton className="h-3 w-56" />
-                <Skeleton className="h-12 w-full" />
-              </div>
-            </div>
+          <TimelineEntrySkeleton
+            key={index}
+            index={index}
+            isLast={index === 2}
+          />
         ))}
-        </CardContent>
-      </Card>
+      </Timeline>
     </div>
   );
 }

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;
@@ -137,11 +149,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 +166,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 +188,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 +208,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 +248,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}
@@ -271,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>

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}

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

@@ -1,11 +1,29 @@
-import { Card, CardContent, CardHeader } from '@/components/ui/card';
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardHeader,
+} from '@/components/ui/card';
 import { Skeleton } from '@/components/ui/skeleton';
 
-function OverviewSkeletonField() {
+function OverviewMetaSkeletonField({ className }: { className?: string }) {
   return (
-    <div className="space-y-2">
+    <div className={`flex items-center gap-3 ${className ?? ''}`}>
+      <Skeleton className="size-5 shrink-0 rounded-lg" />
+      <div className="min-w-0 space-y-2">
         <Skeleton className="h-3 w-24" />
-      <Skeleton className="h-4 w-32" />
+        <Skeleton className="h-4 w-32 max-w-full" />
+      </div>
+    </div>
+  );
+}
+
+function SummarySkeletonCard() {
+  return (
+    <div className="rounded-lg bg-muted/40 p-4">
+      <Skeleton className="h-7 w-10" />
+      <Skeleton className="mt-3 h-3 w-24 max-w-full" />
+      <Skeleton className="mt-2 h-3 w-16" />
     </div>
   );
 }
@@ -27,15 +45,45 @@ export function TicketOverviewHeaderSkeleton() {
 
 export function TicketOverviewCardSkeleton() {
   return (
-    <Card aria-label="Loading ticket overview">
-      <CardHeader>
-        <Skeleton className="h-4 w-20" />
-      </CardHeader>
-      <CardContent className="grid grid-cols-2 gap-x-4 gap-y-6 md:grid-cols-4">
-        {Array.from({ length: 4 }).map((_, index) => (
-          <OverviewSkeletonField key={index} />
-        ))}
+    <div className="space-y-5" aria-label="Loading ticket overview">
+      <Card>
+        <CardContent className="grid gap-4 py-4 sm:grid-cols-3 sm:divide-x">
+          <OverviewMetaSkeletonField className="sm:pr-4" />
+          <OverviewMetaSkeletonField className="sm:px-4" />
+          <OverviewMetaSkeletonField className="sm:pl-4" />
         </CardContent>
       </Card>
+
+      <Card>
+        <CardHeader>
+          <div className="flex items-center gap-2">
+            <Skeleton className="size-5 rounded-lg" />
+            <Skeleton className="h-5 w-40" />
+          </div>
+          <CardAction>
+            <Skeleton className="h-9 w-28" />
+          </CardAction>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="grid grid-cols-2 gap-3 lg:grid-cols-3 xl:grid-cols-6">
+            {Array.from({ length: 6 }).map((_, index) => (
+              <SummarySkeletonCard key={index} />
+            ))}
+          </div>
+
+          <div className="grid gap-3 rounded-lg bg-muted/35 px-4 py-3 sm:grid-cols-3">
+            {Array.from({ length: 3 }).map((_, index) => (
+              <div
+                key={index}
+                className="flex items-center justify-center gap-2"
+              >
+                <Skeleton className="size-4 rounded-lg" />
+                <Skeleton className="h-4 w-24" />
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
   );
 }

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

@@ -4,6 +4,7 @@ import { PERMISSIONS } from '@/constants/permissions';
 import { PermissionGuard } from '@/guards';
 import type { TicketDetail } from '@/types';
 
+import { AssignedContractorAction } from './actions/AssignedContractorAction';
 import { AssignTicketAction } from './actions/AssignTicketAction';
 import { ClosedTicketAction } from './actions/ClosedTicketAction';
 import { NoTicketAction } from './actions/NoTicketAction';
@@ -41,7 +42,10 @@ function getTicketAction(ticket: TicketDetail) {
           </PermissionGuard>
         }
       >
+        <>
+          <AssignedContractorAction ticket={ticket} />
           <ReviewExtensionRequestAction ticket={ticket} />
+        </>
       </PermissionGuard>
     );
   }

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

@@ -27,7 +27,7 @@ export function AssignTicketAction({ ticket }: { ticket: TicketDetail }) {
     return date;
   }, []);
   const maxDueMonth = useMemo(
-    () => new Date(today.getFullYear() + 5, 11),
+    () => new Date(today.getFullYear() + 20, 11),
     [today],
   );
 

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

@@ -0,0 +1,61 @@
+'use client';
+
+import { CalendarClock, UserCheck } from 'lucide-react';
+
+import { PersonInfo } from '@/components/person-avatar';
+import { Badge } from '@/components/ui/badge';
+import type { TicketDetail } from '@/types';
+import { formatDate } from '@/utils/date';
+
+import { TicketActionCard } from './TicketActionCard';
+
+function AssignmentField({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="min-w-0 space-y-1">
+      <p className="text-xs text-muted-foreground">{label}</p>
+      <p className="truncate text-sm font-medium text-foreground">{value}</p>
+    </div>
+  );
+}
+
+export function AssignedContractorAction({ ticket }: { ticket: TicketDetail }) {
+  const worker = ticket.worker;
+
+  return (
+    <TicketActionCard icon={UserCheck} title="Assigned Contractor">
+      {worker ? (
+        <div className="space-y-5">
+          <div className="flex items-center justify-between gap-3">
+            <PersonInfo person={worker} size="lg" />
+            <Badge>
+              Assigned
+            </Badge>
+          </div>
+
+          <div className="grid grid-cols-2 gap-x-4 gap-y-5 border-t pt-4">
+            <AssignmentField label="Role" value={worker.role?.name ?? '-'} />
+            <AssignmentField
+              label="Assigned By"
+              value={worker.assigned_by_name ?? '-'}
+            />
+            <AssignmentField
+              label="Assigned On"
+              value={formatDate(worker.assigned_at)}
+            />
+            <div className="min-w-0 space-y-1">
+              <p className="text-xs text-muted-foreground">Due Date</p>
+              <p className="flex items-center gap-1.5 text-sm font-medium text-foreground">
+                <CalendarClock className="size-4 shrink-0 text-muted-foreground" />
+                <span className="truncate">{formatDate(worker.due_at)}</span>
+              </p>
+            </div>
+          </div>
+        </div>
+      ) : (
+        <p className="text-sm text-muted-foreground">
+          Assignment details are not available.
+        </p>
+      )}
+    </TicketActionCard>
+  );
+}

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

@@ -1,9 +1,10 @@
 'use client';
 
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { Clock3, Loader2, Send } from 'lucide-react';
 
 import { DatePicker } from '@/components/form/DatePicker';
+import { DatePickerSimple } from '@/components/form/DatePickerSimple';
 import { Button } from '@/components/ui/button';
 import { Label } from '@/components/ui/label';
 import { Textarea } from '@/components/ui/textarea';
@@ -22,9 +23,21 @@ export function RequestExtensionForm({
   ticket,
   onCancel,
 }: RequestExtensionFormProps) {
-  const currentDueDate = ticket.worker?.due_at
-    ? new Date(ticket.worker.due_at)
-    : undefined;
+  const currentDueAt = ticket.worker?.due_at;
+  const currentDueDate = useMemo(
+    () => (currentDueAt ? new Date(currentDueAt) : undefined),
+    [currentDueAt],
+  );
+  const earliestRequestedDate = useMemo(() => {
+    const date = currentDueDate ? new Date(currentDueDate) : new Date();
+    date.setHours(0, 0, 0, 0);
+    if (currentDueDate) date.setDate(date.getDate() + 1);
+    return date;
+  }, [currentDueDate]);
+  const latestRequestedMonth = useMemo(
+    () => new Date(earliestRequestedDate.getFullYear() + 20, 11),
+    [earliestRequestedDate],
+  );
   const [requestedDueDate, setRequestedDueDate] = useState<Date>();
   const [reason, setReason] = useState('');
   const assignmentId = ticket.worker?.assignment_id;
@@ -81,12 +94,17 @@ export function RequestExtensionForm({
         <Label>
           Requested Due Date <span className="text-destructive">*</span>
         </Label>
-        <DatePicker
+        <DatePickerSimple
+          id="requested-due-date"
           value={requestedDueDate}
           onChange={setRequestedDueDate}
-          showTimeZone={false}
+          showLabel={false}
+          placeholder="Select requested due date"
           disabled={isPending}
           className="w-full"
+          startMonth={earliestRequestedDate}
+          endMonth={latestRequestedMonth}
+          disabledDates={{ before: earliestRequestedDate }}
         />
         {requestedDueDate && !isRequestedDateValid ? (
           <p className="text-xs text-destructive">

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

@@ -24,7 +24,6 @@ import {
   useReviewTicketExtensionMutation,
   useTicketExtensionRequestQuery,
 } from '../../../hooks/useTicketQueries';
-import { NoTicketAction } from './NoTicketAction';
 import { TicketActionCard } from './TicketActionCard';
 
 const MAX_NOTE_LENGTH = 300;
@@ -208,7 +207,7 @@ export function ReviewExtensionRequestAction({
   );
 
   if (!assignmentId || extensionRequestQuery.isError) {
-    return <NoTicketAction />;
+    return null;
   }
 
   if (extensionRequestQuery.isLoading) {
@@ -226,7 +225,7 @@ export function ReviewExtensionRequestAction({
     ? getPendingRequest(extensionRequestQuery.data)
     : null;
 
-  if (!pendingRequest) return <NoTicketAction />;
+  if (!pendingRequest) return null;
 
   return <ExtensionReviewForm ticket={ticket} request={pendingRequest} />;
 }

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,

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) =>

src/components/mode-toogle.tsx

@@ -1,40 +1,21 @@
 'use client';
 
-import * as React from 'react';
 import { Moon, Sun } from 'lucide-react';
 import { useTheme } from 'next-themes';
 
 import { Button } from '@/components/ui/button';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
 
 export function ModeToggle() {
-  const { setTheme } = useTheme();
+  const { resolvedTheme, setTheme } = useTheme();
+  const toggleTheme = () => {
+    setTheme(resolvedTheme === 'dark' ? 'light' : 'dark');
+  };
 
   return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="outline" size="icon">
+    <Button variant="outline" size="icon" onClick={toggleTheme}>
       <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
       <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
       <span className="sr-only">Toggle theme</span>
     </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
-        <DropdownMenuItem onClick={() => setTheme('light')}>
-          Light
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme('dark')}>
-          Dark
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme('system')}>
-          System
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
   );
 }

src/components/ui/dropdown-menu.tsx

@@ -73,7 +73,7 @@ function DropdownMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "group/dropdown-menu-item relative flex cursor-default items-center gap-2 rounded-lg px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
+        "group/dropdown-menu-item relative flex cursor-pointer items-center gap-2 rounded-lg px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
         className
       )}
       {...props}

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}`,

src/providers/AppInitializer.tsx

@@ -1,19 +1,20 @@
 'use client';
 
+import { Button } from '@/components/ui/button';
 import { initializeAuthenticatedApp } from '@/services/initializer.service';
 import { useAppStore } from '@/store/app.store';
 import { useAuthStore } from '@/store/auth.store';
 import type { ReactNode } from 'react';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 export default function AppInitializer({ children }: { children: ReactNode }) {
   const accessToken = useAuthStore((state) => state.accessToken);
-  const logout = useAuthStore((state) => state.logout);
   const user = useAppStore((state) => state.user);
+  const loadStatus = useAppStore((state) => state.loadStatus);
   const setLoading = useAppStore((state) => state.setLoading);
   const setLoaded = useAppStore((state) => state.setLoaded);
   const setLoadError = useAppStore((state) => state.setLoadError);
-  const clearApp = useAppStore((state) => state.clear);
+  const [retryAttempt, setRetryAttempt] = useState(0);
 
   useEffect(() => {
     let isActive = true;
@@ -30,8 +31,6 @@ export default function AppInitializer({ children }: { children: ReactNode }) {
         await initializeAuthenticatedApp();
       } catch {
         if (isActive) {
-          logout();
-          clearApp();
           setLoadError();
         }
       }
@@ -42,15 +41,32 @@ export default function AppInitializer({ children }: { children: ReactNode }) {
     return () => {
       isActive = false;
     };
-  }, [
-    accessToken,
-    clearApp,
-    logout,
-    setLoaded,
-    setLoadError,
-    setLoading,
-    user,
-  ]);
+  }, [accessToken, retryAttempt, setLoaded, setLoadError, setLoading, user]);
+
+  if (accessToken && !user && loadStatus === 'error') {
+    return (
+      <main className="flex min-h-screen items-center justify-center bg-background px-6">
+        <div
+          className="flex max-w-md flex-col items-center gap-4 text-center"
+          role="alert"
+        >
+          <div className="space-y-2">
+            <h1 className="text-xl font-semibold">Unable to load workspace</h1>
+            <p className="text-sm text-muted-foreground">
+              We could not load your account details. Your session has been
+              kept, so you can safely try again.
+            </p>
+          </div>
+          <Button
+            type="button"
+            onClick={() => setRetryAttempt((value) => value + 1)}
+          >
+            Try again
+          </Button>
+        </div>
+      </main>
+    );
+  }
 
   return children;
 }

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;
+  },
+};

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';

src/services/axios/axios.ts

@@ -12,6 +12,62 @@ const axiosClient = axios.create({
   },
 });
 
+export const axiosAuth = axios.create({
+  baseURL: BASE_URL,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+
+let refreshPromise: Promise<string> | null = null;
+
+const isInvalidSessionResponse = (error: unknown) => {
+  if (!axios.isAxiosError(error)) return false;
+
+  return error.response?.status === 401 || error.response?.status === 403;
+};
+
+const refreshAccessToken = () => {
+  if (!refreshPromise) {
+    refreshPromise = axiosAuth
+      .post(
+        'api/auth/refresh',
+        {},
+        {
+          withCredentials: true,
+        },
+      )
+      .then((response) => {
+        const accessToken = response.data?.access_token;
+
+        if (!accessToken) {
+          throw new Error('Refresh failed: no access token');
+        }
+
+        useAuthStore.getState().setAccessToken(accessToken);
+
+        return accessToken;
+      })
+      .catch((error: unknown) => {
+        if (isInvalidSessionResponse(error)) {
+          useAuthStore.getState().logout();
+          useAppStore.getState().clear();
+
+          if (typeof window !== 'undefined') {
+            window.location.href = '/login';
+          }
+        }
+
+        throw error;
+      })
+      .finally(() => {
+        refreshPromise = null;
+      });
+  }
+
+  return refreshPromise;
+};
+
 axiosClient.interceptors.request.use(
   (config) => {
     const token = useAuthStore.getState().accessToken;
@@ -49,31 +105,11 @@ axiosClient.interceptors.response.use(
       originalRequest._retry = true;
 
       try {
-        const response = await axiosAuth.post(
-          'api/auth/refresh',
-          {},
-          {
-            withCredentials: true,
-          },
-        );
-        const accessToken = response.data?.access_token;
-
-        if (!accessToken) {
-          throw new Error('Refresh failed: no access token');
-        }
-
-        useAuthStore.getState().setAccessToken(accessToken);
+        const accessToken = await refreshAccessToken();
         originalRequest.headers.Authorization = `Bearer ${accessToken}`;
 
         return axiosClient(originalRequest);
       } catch (refreshError) {
-        useAuthStore.getState().logout();
-        useAppStore.getState().clear();
-
-        if (typeof window !== 'undefined') {
-          window.location.href = '/login';
-        }
-
         return Promise.reject(refreshError);
       }
     }
@@ -82,11 +118,4 @@ axiosClient.interceptors.response.use(
   },
 );
 
-export const axiosAuth = axios.create({
-  baseURL: BASE_URL,
-  headers: {
-    'Content-Type': 'application/json',
-  },
-});
-
 export default axiosClient;

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;