feat(ticket-actions): show backend-driven overdue lot warning

feat(ticket-actions): show lot context on extension cards
refactor(ticket): use video detections for assignment map and remove coordinates API
2026-07-31 19:38:00 +05:30 · 2026-07-31 19:37:20 +05:30 · 2026-07-31 19:02:25 +05:30 · 2026-07-31 17:25:53 +05:30
19 changed files with 321 additions and 367 deletions
--- a/src/app/(modules)/ticket/[ticketId]/assign/components/AssignmentIssuesMap.tsx
+++ b/src/app/(modules)/ticket/[ticketId]/assign/components/AssignmentIssuesMap.tsx
@@ -5,11 +5,7 @@ import dynamic from 'next/dynamic';
 import { AlertTriangle, MapPinned, RefreshCw } from 'lucide-react';

 import { getDefectVisual } from '@/constants/defectVisualConfig';
-import type {
-  DetectionCoordinateClass,
-  DetectionCoordinateItem,
-  DetectionCoordinatesResponse,
-} from '@/types';
+import type { DetectionResultItem, VideoDetectionsResponse } from '@/types';
 import { Button } from '@/components/ui/button';
 import {
  Card,
@@ -20,51 +16,80 @@ import {
 } from '@/components/ui/card';

 import type { AssignmentRangePoint } from './assignmentRange';
-import { AssignmentRangeActions } from './AssignmentRangeActions';

 type AssignmentIssuesMapProps = {
-  data?: DetectionCoordinatesResponse;
+  data?: VideoDetectionsResponse;
  isLoading: boolean;
-  isFetchingMore: boolean;
  isError: boolean;
-  hasMore: boolean;
  startPoint: AssignmentRangePoint | null;
  endPoint: AssignmentRangePoint | null;
-  onSetStart: (point: AssignmentRangePoint) => void;
-  onSetEnd: (point: AssignmentRangePoint) => void;
-  onLoadMore: () => void;
  onRetry: () => void;
 };

+type AssignmentMapItem = {
+  id: number;
+  class_name: string;
+  display_name: string;
+  latitude: number;
+  longitude: number;
+  confidence: number;
+  sequence: number;
+};
+
+type AssignmentMapClass = {
+  class_name: string;
+  display_name: string;
+};
+
 type ClientAssignmentIssuesMapProps = {
-  items: DetectionCoordinateItem[];
-  classes: DetectionCoordinateClass[];
+  items: AssignmentMapItem[];
+  classes: AssignmentMapClass[];
  selectedDetectionId: number | null;
  startPoint: AssignmentRangePoint | null;
  endPoint: AssignmentRangePoint | null;
  onSelectDetection: (detectionId: number) => void;
-  onSetStart: (point: AssignmentRangePoint) => void;
-  onSetEnd: (point: AssignmentRangePoint) => void;
 };

-function isValidCoordinate(item: DetectionCoordinateItem) {
-  return (
-    Number.isFinite(item.latitude) &&
-    Number.isFinite(item.longitude) &&
-    item.latitude >= -90 &&
-    item.latitude <= 90 &&
-    item.longitude >= -180 &&
-    item.longitude <= 180
-  );
+function toMapItem(item: DetectionResultItem): AssignmentMapItem | null {
+  const { latitude, longitude } = item.location;
+  if (
+    typeof latitude !== 'number' ||
+    typeof longitude !== 'number' ||
+    !Number.isFinite(latitude) ||
+    !Number.isFinite(longitude) ||
+    latitude < -90 ||
+    latitude > 90 ||
+    longitude < -180 ||
+    longitude > 180
+  ) {
+    return null;
+  }
+
+  return {
+    id: item.detection.id,
+    class_name: item.detection.class_name,
+    display_name: item.detection.display_name,
+    latitude,
+    longitude,
+    confidence: item.detection.confidence,
+    sequence: item.frame.timestamp_seconds,
+  };
 }

 const ClientAssignmentIssuesMap = dynamic<ClientAssignmentIssuesMapProps>(
  async () => {
-    const { CircleMarker, MapContainer, Popup, TileLayer, Tooltip, useMap } =
-      await import('react-leaflet');
+    const {
+      CircleMarker,
+      MapContainer,
+      Polyline,
+      Popup,
+      TileLayer,
+      Tooltip,
+      useMap,
+    } = await import('react-leaflet');
    const { canvas } = await import('leaflet');

-    function FitMapToIssues({ items }: { items: DetectionCoordinateItem[] }) {
+    function FitMapToIssues({ items }: { items: AssignmentMapItem[] }) {
      const map = useMap();

      useEffect(() => {
@@ -96,8 +121,6 @@ const ClientAssignmentIssuesMap = dynamic<ClientAssignmentIssuesMapProps>(
      startPoint,
      endPoint,
      onSelectDetection,
-      onSetStart,
-      onSetEnd,
    }: ClientAssignmentIssuesMapProps) {
      const markerRenderer = useMemo(() => canvas({ tolerance: 12 }), []);
      const displayNames = new Map(
@@ -107,6 +130,27 @@ const ClientAssignmentIssuesMap = dynamic<ClientAssignmentIssuesMapProps>(
        items[0].latitude,
        items[0].longitude,
      ];
+      const orderedItems = [...items].sort(
+        (first, second) =>
+          first.sequence - second.sequence || first.id - second.id,
+      );
+      const startIndex = orderedItems.findIndex(
+        (item) => item.id === startPoint?.detectionId,
+      );
+      const endIndex = orderedItems.findIndex(
+        (item) => item.id === endPoint?.detectionId,
+      );
+      const hasSelectedRange = startIndex >= 0 && endIndex >= 0;
+      const rangeItems = hasSelectedRange
+        ? orderedItems.slice(
+            Math.min(startIndex, endIndex),
+            Math.max(startIndex, endIndex) + 1,
+          )
+        : [];
+      const rangeDetectionIds = new Set(rangeItems.map((item) => item.id));
+      const rangePath = rangeItems.map(
+        (item) => [item.latitude, item.longitude] as [number, number],
+      );

      return (
        <MapContainer
@@ -119,7 +163,30 @@ const ClientAssignmentIssuesMap = dynamic<ClientAssignmentIssuesMapProps>(
            attribution="&copy; OpenStreetMap contributors"
            url="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
          />
-          <FitMapToIssues items={items} />
+          <FitMapToIssues items={hasSelectedRange ? rangeItems : items} />
+
+          {rangePath.length >= 2 ? (
+            <>
+              <Polyline
+                positions={rangePath}
+                interactive={false}
+                pathOptions={{
+                  color: '#3b82f6',
+                  opacity: 0.18,
+                  weight: 26,
+                }}
+              />
+              <Polyline
+                positions={rangePath}
+                interactive={false}
+                pathOptions={{
+                  color: '#2563eb',
+                  opacity: 0.9,
+                  weight: 4,
+                }}
+              />
+            </>
+          ) : null}

          {items.map((item) => {
            const visual = getDefectVisual(item.class_name);
@@ -127,35 +194,37 @@ const ClientAssignmentIssuesMap = dynamic<ClientAssignmentIssuesMapProps>(
            const isSelected = selectedDetectionId === item.id;
            const isStart = startPoint?.detectionId === item.id;
            const isEnd = endPoint?.detectionId === item.id;
-            const rangeLabel = isStart ? 'A' : isEnd ? 'B' : null;
+            const rangeLabel = isStart ? 'Start' : isEnd ? 'End' : null;
            const rangeColor = isStart
              ? '#16a34a'
              : isEnd
                ? '#dc2626'
                : visual.boundingBoxColor;
            const isRangeIssue = isStart || isEnd;
+            const isInsideRange = rangeDetectionIds.has(item.id);
            const displayName =
              displayNames.get(item.class_name) ??
+              item.display_name ??
              item.class_name.replaceAll('_', ' ');
-            const point: AssignmentRangePoint = {
-              detectionId: item.id,
-              latitude: item.latitude,
-              longitude: item.longitude,
-            };
-
            return (
              <CircleMarker
                key={item.id}
                center={[item.latitude, item.longitude]}
                renderer={markerRenderer}
-                radius={isSelected || isRangeIssue ? 11 : 8}
+                radius={isSelected || isRangeIssue ? 11 : isInsideRange ? 9 : 7}
                pathOptions={{
                  color:
                    isSelected || isRangeIssue
                      ? '#ffffff'
                      : visual.boundingBoxColor,
                  fillColor: rangeColor,
-                  fillOpacity: isSelected || isRangeIssue ? 1 : 0.82,
+                  fillOpacity:
+                    isSelected || isRangeIssue
+                      ? 1
+                      : hasSelectedRange && !isInsideRange
+                        ? 0.22
+                        : 0.82,
+                  opacity: hasSelectedRange && !isInsideRange ? 0.3 : 1,
                  weight: isSelected || isRangeIssue ? 4 : 2,
                }}
                eventHandlers={{
@@ -183,11 +252,11 @@ const ClientAssignmentIssuesMap = dynamic<ClientAssignmentIssuesMapProps>(
                        </p>
                      </div>
                      {rangeLabel ? (
-                        <span
-                          className="flex size-6 shrink-0 items-center justify-center rounded-full text-xs font-semibold text-white"
-                          style={{ backgroundColor: rangeColor }}
-                          aria-label={isStart ? 'Start issue' : 'End issue'}
-                        >
+                        <span className="flex shrink-0 items-center gap-1.5 text-xs font-semibold">
+                          <span
+                            className="size-3 rounded-full"
+                            style={{ backgroundColor: rangeColor }}
+                          />
                          {rangeLabel}
                        </span>
                      ) : null}
@@ -213,22 +282,17 @@ const ClientAssignmentIssuesMap = dynamic<ClientAssignmentIssuesMapProps>(
                        </dd>
                      </div>
                    </dl>
-
-                    <div className="border-t pt-3">
-                      <AssignmentRangeActions
-                        point={point}
-                        startPoint={startPoint}
-                        endPoint={endPoint}
-                        onSetStart={onSetStart}
-                        onSetEnd={onSetEnd}
-                        stretch
-                      />
-                    </div>
                  </div>
                </Popup>
                {rangeLabel ? (
-                  <Tooltip permanent direction="center" opacity={1}>
-                    {rangeLabel}
+                  <Tooltip
+                    permanent
+                    direction="top"
+                    offset={[0, -10]}
+                    opacity={1}
+                    className="range-point-label"
+                  >
+                    <span style={{ color: rangeColor }}>{rangeLabel}</span>
                  </Tooltip>
                ) : null}
              </CircleMarker>
@@ -247,25 +311,38 @@ const ClientAssignmentIssuesMap = dynamic<ClientAssignmentIssuesMapProps>(
 export function AssignmentIssuesMap({
  data,
  isLoading,
-  isFetchingMore,
  isError,
-  hasMore,
  startPoint,
  endPoint,
-  onSetStart,
-  onSetEnd,
-  onLoadMore,
  onRetry,
 }: AssignmentIssuesMapProps) {
  const [selectedDetectionId, setSelectedDetectionId] = useState<number | null>(
    null,
  );
  const validItems = useMemo(
-    () => (data?.items ?? []).filter(isValidCoordinate),
+    () =>
+      (data?.items ?? []).flatMap((item) => {
+        const mapItem = toMapItem(item);
+        return mapItem ? [mapItem] : [];
+      }),
    [data?.items],
  );
-  const total = data?.total ?? 0;
-  const loadedCount = Math.min(data?.items.length ?? 0, total);
+  const classes = useMemo(
+    () =>
+      Array.from(
+        new Map(
+          validItems.map((item) => [
+            item.class_name,
+            {
+              class_name: item.class_name,
+              display_name: item.display_name,
+            },
+          ]),
+        ).values(),
+      ),
+    [validItems],
+  );
+  const pageItemCount = data?.items.length ?? 0;

  useEffect(() => {
    if (
@@ -287,7 +364,7 @@ export function AssignmentIssuesMap({
            <div>
              <CardTitle className="text-base">Issues on Map</CardTitle>
              <CardDescription>
-                Click a marker, then choose Start or End.
+                Select Start and End in the table to preview the covered range.
              </CardDescription>
            </div>
          </div>
@@ -329,13 +406,11 @@ export function AssignmentIssuesMap({
            <div className="h-[440px] min-w-0 bg-muted">
              <ClientAssignmentIssuesMap
                items={validItems}
-                classes={data?.classes ?? []}
+                classes={classes}
                selectedDetectionId={selectedDetectionId}
                startPoint={startPoint}
                endPoint={endPoint}
                onSelectDetection={setSelectedDetectionId}
-                onSetStart={onSetStart}
-                onSetEnd={onSetEnd}
              />
            </div>

@@ -344,7 +419,7 @@ export function AssignmentIssuesMap({
              aria-label="Map legend"
            >
              <span className="text-sm font-medium">Map legend</span>
-              {(data?.classes ?? []).map((item) => {
+              {classes.map((item) => {
                const visual = getDefectVisual(item.class_name);
                const IssueIcon = visual.icon;

@@ -366,27 +441,33 @@ export function AssignmentIssuesMap({
                  </div>
                );
              })}
+              {startPoint ? (
+                <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                  <span className="size-4 rounded-full border-2 border-white bg-green-600 shadow-sm" />
+                  <span>Start</span>
+                </div>
+              ) : null}
+              {endPoint ? (
+                <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                  <span className="size-4 rounded-full border-2 border-white bg-red-600 shadow-sm" />
+                  <span>End</span>
+                </div>
+              ) : null}
+              {startPoint && endPoint ? (
+                <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                  <span className="relative h-4 w-8 rounded-full bg-blue-500/20">
+                    <span className="absolute top-1/2 right-0 left-0 h-0.5 -translate-y-1/2 bg-blue-600" />
+                  </span>
+                  <span>Coverage area</span>
+                </div>
+              ) : null}
            </div>

-            <div className="flex items-center justify-between gap-3 border-t px-4 py-3">
+            <div className="border-t px-4 py-3">
              <span className="text-sm text-muted-foreground">
-                Showing {loadedCount} of {total}
+                {validItems.length} mapped from {pageItemCount} cached{' '}
+                {pageItemCount === 1 ? 'issue' : 'issues'}
              </span>
-              {hasMore ? (
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="sm"
-                  onClick={onLoadMore}
-                  disabled={isFetchingMore}
-                >
-                  {isFetchingMore ? 'Loading...' : 'Load more issues'}
-                </Button>
-              ) : (
-                <span className="text-sm text-muted-foreground">
-                  All issues are shown
-                </span>
-              )}
            </div>
          </>
        )}
--- a/src/app/(modules)/ticket/[ticketId]/assign/components/ChooseIssuesSection.tsx
+++ b/src/app/(modules)/ticket/[ticketId]/assign/components/ChooseIssuesSection.tsx
@@ -1,17 +1,15 @@
 'use client';

 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { X } from 'lucide-react';
+import { FilterX } from 'lucide-react';

 import { MultiSelectPopover } from '@/components/form/MultiSelectPopover';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import type { VideoDetectionsResponse } from '@/types';

-import {
-  useDetectionCoordinatesQuery,
-  useTicketDetectionsQuery,
-} from '../../../hooks/useTicketQueries';
+import { useTicketDetectionsQuery } from '../../../hooks/useTicketQueries';
 import {
  formatCompactRangeCoordinate,
  formatRangeCoordinate,
@@ -22,7 +20,6 @@ import { useIssueColumns } from './IssueColumns';
 import { IssueTable } from './IssueTable';

 const DEFAULT_PAGE_SIZE = 10;
-const MAP_PAGE_SIZE = 50;

 interface IssueTypeOption {
  class_name: string;
@@ -34,6 +31,7 @@ interface ChooseIssuesSectionProps {
  videoId?: string;
  issueTypes: IssueTypeOption[];
  selectedIssueTypes: string[];
+  cacheRevision: number;
  startPoint: AssignmentRangePoint | null;
  endPoint: AssignmentRangePoint | null;
  onSelectedIssueTypesChange: (values: string[]) => void;
@@ -45,6 +43,7 @@ export function ChooseIssuesSection({
  videoId,
  issueTypes,
  selectedIssueTypes,
+  cacheRevision,
  startPoint,
  endPoint,
  onSelectedIssueTypesChange,
@@ -84,15 +83,21 @@ export function ChooseIssuesSection({
  );
  const handleIssueTypesChange = useCallback(
    (values: string[]) => {
+      setSkip(0);
      onSelectedIssueTypesChange(values);
      onStartPointChange(null);
      onEndPointChange(null);
    },
    [onEndPointChange, onSelectedIssueTypesChange, onStartPointChange],
  );
-  useEffect(() => {
+  const hasActiveFilters =
+    selectedIssueTypes.length > 0 || startPoint !== null || endPoint !== null;
+  const clearFilters = useCallback(() => {
    setSkip(0);
-  }, [selectedIssueTypes]);
+    onSelectedIssueTypesChange([]);
+    onStartPointChange(null);
+    onEndPointChange(null);
+  }, [onEndPointChange, onSelectedIssueTypesChange, onStartPointChange]);

  const queryParams = useMemo(
    () => ({
@@ -105,39 +110,56 @@ export function ChooseIssuesSection({
    [limit, selectedIssueTypes, skip],
  );
  const detectionsQuery = useTicketDetectionsQuery(videoId, queryParams);
-  const mapQueryParams = useMemo(
-    () => ({
-      limit: MAP_PAGE_SIZE,
-      class_name:
-        selectedIssueTypes.length > 0 ? selectedIssueTypes : undefined,
-      assignment_status: 'unassigned' as const,
-    }),
-    [selectedIssueTypes],
-  );
-  const coordinatesQuery = useDetectionCoordinatesQuery(
-    videoId,
-    mapQueryParams,
-  );
  const result = detectionsQuery.data;
-  const mapData = useMemo(() => {
-    const pages = coordinatesQuery.data?.pages;
+  const mapCacheKey = useMemo(
+    () => JSON.stringify([videoId ?? '', selectedIssueTypes, cacheRevision]),
+    [cacheRevision, selectedIssueTypes, videoId],
+  );
+  const [mapCache, setMapCache] = useState<
+    Record<string, VideoDetectionsResponse>
+  >({});

-    if (!pages?.length) return undefined;
+  useEffect(() => {
+    if (!result) return;

-    const latestPage = pages[pages.length - 1];
+    setMapCache((current) => {
+      const itemsById = new Map(
+        (current[mapCacheKey]?.items ?? []).map((item) => [
+          item.detection.id,
+          item,
+        ]),
+      );
+      result.items.forEach((item) => itemsById.set(item.detection.id, item));

-    return {
-      ...latestPage,
-      items: pages.flatMap((page) => page.items),
-      truncated: Boolean(coordinatesQuery.hasNextPage),
-    };
-  }, [coordinatesQuery.data?.pages, coordinatesQuery.hasNextPage]);
+      return {
+        ...current,
+        [mapCacheKey]: {
+          ...result,
+          skip: 0,
+          limit: itemsById.size,
+          items: Array.from(itemsById.values()),
+        },
+      };
+    });
+  }, [mapCacheKey, result]);
+
+  const mapData = mapCache[mapCacheKey];

  return (
    <div className="min-w-0 space-y-5">
      <Card size="sm" aria-label="Issue filters">
-        <CardHeader>
+        <CardHeader className="flex flex-row items-center justify-between gap-3">
          <CardTitle>Filters</CardTitle>
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            disabled={!hasActiveFilters}
+            onClick={clearFilters}
+          >
+            <FilterX />
+            Clear Filters
+          </Button>
        </CardHeader>
        <CardContent>
          <div className="flex flex-wrap items-center gap-2">
@@ -177,40 +199,10 @@ export function ChooseIssuesSection({
                </span>
              </Badge>
            ) : null}
-
-            {startPoint !== null || endPoint !== null ? (
-              <Button
-                type="button"
-                variant="ghost"
-                size="icon"
-                className="size-8"
-                aria-label="Clear coordinate range"
-                onClick={() => {
-                  onStartPointChange(null);
-                  onEndPointChange(null);
-                }}
-              >
-                <X />
-              </Button>
-            ) : null}
          </div>
        </CardContent>
      </Card>

-      <AssignmentIssuesMap
-        data={mapData}
-        isLoading={coordinatesQuery.isLoading}
-        isFetchingMore={coordinatesQuery.isFetchingNextPage}
-        isError={coordinatesQuery.isError}
-        hasMore={Boolean(coordinatesQuery.hasNextPage)}
-        startPoint={startPoint}
-        endPoint={endPoint}
-        onSetStart={handleSetStart}
-        onSetEnd={handleSetEnd}
-        onLoadMore={() => void coordinatesQuery.fetchNextPage()}
-        onRetry={() => void coordinatesQuery.refetch()}
-      />
-
      <IssueTable
        columns={columns}
        issues={result?.items ?? []}
@@ -223,6 +215,15 @@ export function ChooseIssuesSection({
        onPageChange={setSkip}
        onLimitChange={setLimit}
      />
+
+      <AssignmentIssuesMap
+        data={mapData}
+        isLoading={detectionsQuery.isLoading && !mapData}
+        isError={detectionsQuery.isError && !mapData}
+        startPoint={startPoint}
+        endPoint={endPoint}
+        onRetry={() => void detectionsQuery.refetch()}
+      />
    </div>
  );
 }
--- a/src/app/(modules)/ticket/[ticketId]/assign/page.tsx
+++ b/src/app/(modules)/ticket/[ticketId]/assign/page.tsx
@@ -42,6 +42,7 @@ export default function TicketAssignmentPage() {
  );
  const [endPoint, setEndPoint] = useState<AssignmentRangePoint | null>(null);
  const [selectedIssueTypes, setSelectedIssueTypes] = useState<string[]>([]);
+  const [assignmentRevision, setAssignmentRevision] = useState(0);
  const overviewQuery = useTicketOverviewQuery(ticketId);
  const overview = overviewQuery.data;
  const videoId = overview?.video_id ?? overview?.video?.id ?? undefined;
@@ -109,6 +110,7 @@ export default function TicketAssignmentPage() {
            videoId={videoId}
            issueTypes={overview.ai_result.detections_by_class}
            selectedIssueTypes={selectedIssueTypes}
+            cacheRevision={assignmentRevision}
            startPoint={startPoint}
            endPoint={endPoint}
            onSelectedIssueTypesChange={setSelectedIssueTypes}
@@ -151,6 +153,7 @@ export default function TicketAssignmentPage() {
              onAssigned={() => {
                setStartPoint(null);
                setEndPoint(null);
+                setAssignmentRevision((revision) => revision + 1);
              }}
            />
          </PermissionGuard>
--- a/src/app/(modules)/ticket/[ticketId]/components/TicketStatusActions.tsx
+++ b/src/app/(modules)/ticket/[ticketId]/components/TicketStatusActions.tsx
@@ -1,8 +1,11 @@
 'use client';

+import { AlertTriangle } from 'lucide-react';
+
 import { PERMISSIONS } from '@/constants/permissions';
 import { PermissionGuard } from '@/guards';
 import type { TicketAssignmentSummary } from '@/types';
+import { formatDate } from '@/utils/date';

 import { NoTicketAction } from './actions/NoTicketAction';
 import { RequestExtensionAction } from './actions/RequestExtensionAction';
@@ -13,6 +16,29 @@ interface TicketStatusActionsProps {
  assignment?: TicketAssignmentSummary;
 }

+function OverdueLotAlert({
+  lotId,
+  dueAt,
+}: {
+  lotId: number;
+  dueAt: string | null;
+}) {
+  return (
+    <div
+      role="alert"
+      className="flex gap-3 rounded-lg border border-destructive/30 bg-destructive/5 p-3 text-destructive"
+    >
+      <AlertTriangle className="mt-0.5 size-5 shrink-0" />
+      <div className="min-w-0">
+        <p className="text-sm font-semibold">Lot {lotId} is overdue</p>
+        <p className="mt-0.5 text-xs text-destructive/80">
+          The due date expired on {formatDate(dueAt)}.
+        </p>
+      </div>
+    </div>
+  );
+}
+
 function getTicketAction(
  ticketId: string,
  assignment?: TicketAssignmentSummary,
@@ -51,5 +77,12 @@ export function TicketStatusActions({
 }: TicketStatusActionsProps) {
  const action = getTicketAction(ticketId, assignment);

-  return action ? <div className="space-y-3">{action}</div> : null;
+  return action ? (
+    <div className="space-y-3">
+      {assignment?.is_overdue ? (
+        <OverdueLotAlert lotId={assignment.id} dueAt={assignment.due_at} />
+      ) : null}
+      {action}
+    </div>
+  ) : null;
 }
--- a/src/app/(modules)/ticket/[ticketId]/components/actions/RequestExtensionAction.tsx
+++ b/src/app/(modules)/ticket/[ticketId]/components/actions/RequestExtensionAction.tsx
@@ -13,7 +13,11 @@ export function RequestExtensionAction({
  dueAt: string | null;
 }) {
  return (
-    <TicketActionCard icon={Clock3} title="Request Extension">
+    <TicketActionCard
+      icon={Clock3}
+      title="Request Extension"
+      contextLabel={`Lot ${assignmentId}`}
+    >
      <TicketExtensionRequestPanel
        ticketId={ticketId}
        assignmentId={assignmentId}
--- a/src/app/(modules)/ticket/[ticketId]/components/actions/ReviewExtensionRequestAction.tsx
+++ b/src/app/(modules)/ticket/[ticketId]/components/actions/ReviewExtensionRequestAction.tsx
@@ -105,7 +105,11 @@ function ExtensionReviewForm({
  const extensionDays = getExtensionDays(request);

  return (
-    <TicketActionCard icon={CalendarClock} title="Extension Request Details">
+    <TicketActionCard
+      icon={CalendarClock}
+      title="Extension Request Details"
+      contextLabel={`Lot ${assignmentId}`}
+    >
      <div className="space-y-4">
        <Requester request={request} />

@@ -253,7 +257,11 @@ export function ReviewExtensionRequestAction({

  if (extensionRequestQuery.isLoading) {
    return (
-      <TicketActionCard icon={Clock3} title="Extension Request">
+      <TicketActionCard
+        icon={Clock3}
+        title="Extension Request"
+        contextLabel={`Lot ${assignmentId}`}
+      >
        <div className="flex items-center justify-center py-8 text-muted-foreground">
          <Loader2 className="mr-2 size-4 animate-spin" />
          <span className="text-sm">Checking for requests...</span>
--- a/src/app/(modules)/ticket/[ticketId]/components/actions/TicketActionCard.tsx
+++ b/src/app/(modules)/ticket/[ticketId]/components/actions/TicketActionCard.tsx
@@ -2,6 +2,7 @@

 import type { LucideIcon } from 'lucide-react';

+import { Badge } from '@/components/ui/badge';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { cn } from '@/lib/utils';

@@ -9,6 +10,7 @@ interface TicketActionCardProps {
  icon: LucideIcon;
  iconClassName?: string;
  title: string;
+  contextLabel?: string;
  children: React.ReactNode;
 }

@@ -16,15 +18,23 @@ export function TicketActionCard({
  icon: Icon,
  iconClassName,
  title,
+  contextLabel,
  children,
 }: TicketActionCardProps) {
  return (
    <Card>
      <CardHeader>
-        <CardTitle className="flex items-center gap-2 text-base">
-          <Icon className={cn('text-primary', iconClassName)} />
-          {title}
-        </CardTitle>
+        <div className="flex items-center justify-between gap-3">
+          <CardTitle className="flex min-w-0 items-center gap-2 text-base">
+            <Icon className={cn('shrink-0 text-primary', iconClassName)} />
+            <span className="truncate">{title}</span>
+          </CardTitle>
+          {contextLabel ? (
+            <Badge variant="secondary" className="shrink-0">
+              {contextLabel}
+            </Badge>
+          ) : null}
+        </div>
      </CardHeader>
      <CardContent>{children}</CardContent>
    </Card>
--- a/src/app/(modules)/ticket/hooks/useTicketDetailEvents.ts
+++ b/src/app/(modules)/ticket/hooks/useTicketDetailEvents.ts
@@ -32,9 +32,6 @@ export function useTicketDetailEvents(
    queryClient.refetchQueries({
      queryKey: ticketKeys.timeline(ticketId),
    });
-    queryClient.invalidateQueries({
-      queryKey: ticketKeys.defectClasses(ticketId),
-    });
    queryClient.invalidateQueries({ queryKey: ticketKeys.lists() });
  }, [queryClient, ticketId]);

--- a/src/app/(modules)/ticket/hooks/useTicketQueries.ts
+++ b/src/app/(modules)/ticket/hooks/useTicketQueries.ts
@@ -13,7 +13,6 @@ import { detectionService, ticketService, videoService } from '@/services/api';
 import type {
  AssignTicketPayload,
  CloseTicketPayload,
-  DetectionCoordinatesParams,
  DiscardDetectionPayload,
  RequestTicketExtensionPayload,
  ReviewDetectionRepairProofPayload,
@@ -77,14 +76,6 @@ export function useTicketTimelineQuery(ticketId: string | undefined) {
  });
 }

-export function useTicketDefectClassesQuery(ticketId: string | undefined) {
-  return useQuery({
-    queryKey: ticketKeys.defectClasses(ticketId ?? ''),
-    queryFn: () => ticketService.getTicketDefectClasses(ticketId as string),
-    enabled: Boolean(ticketId),
-  });
-}
-
 export function useTicketAssignmentsQuery(
  ticketId: string | undefined,
  initialAssignments?: TicketAssignmentSummary[],
@@ -134,43 +125,7 @@ export function useTicketDetectionsQuery(
    queryFn: () =>
      videoService.getVideoDetections(videoId as string, queryParams),
    enabled: Boolean(videoId),
-  });
-}
-
-export function useDetectionCoordinatesQuery(
-  videoId: string | undefined,
-  params: DetectionCoordinatesParams,
-) {
-  const queryParams = useMemo<DetectionCoordinatesParams>(
-    () => ({
-      limit: params.limit ?? 50,
-      class_name: params.class_name,
-      assignment_status: params.assignment_status,
-      search: params.search,
-    }),
-    [params.assignment_status, params.class_name, params.limit, params.search],
-  );
-
-  return useInfiniteQuery({
-    queryKey: ticketKeys.detectionCoordinates(videoId ?? '', queryParams),
-    queryFn: ({ pageParam }) =>
-      detectionService.getCoordinates(videoId as string, {
-        ...queryParams,
-        skip: pageParam,
-      }),
-    initialPageParam: 0,
-    getNextPageParam: (lastPage, allPages) => {
-      if (lastPage.items.length === 0) return undefined;
-
-      const loadedCount = allPages.reduce(
-        (total, page) => total + page.items.length,
-        0,
-      );
-
-      return loadedCount < lastPage.total ? loadedCount : undefined;
-    },
-    enabled: Boolean(videoId),
-    staleTime: 60 * 1000,
+    staleTime: Infinity,
  });
 }

@@ -231,9 +186,6 @@ export function useDiscardDetectionMutation(
        queryClient.invalidateQueries({
          queryKey: ticketKeys.overview(ticketId),
        }),
-        queryClient.invalidateQueries({
-          queryKey: ticketKeys.defectClasses(ticketId),
-        }),
        queryClient.invalidateQueries({ queryKey: ticketKeys.lists() }),
        queryClient.invalidateQueries({
          queryKey: ticketKeys.assignments(ticketId),
@@ -274,9 +226,6 @@ export function useReviewDetectionRepairProofMutation({
              queryKey: ticketKeys.classDetectionLists(videoId),
            })
          : Promise.resolve(),
-        queryClient.invalidateQueries({
-          queryKey: ticketKeys.defectClasses(ticketId),
-        }),
        queryClient.invalidateQueries({
          queryKey: ticketKeys.overview(ticketId),
        }),
@@ -334,9 +283,6 @@ export function useAssignTicketMutation(ticketId: string, videoId?: string) {
              queryClient.invalidateQueries({
                queryKey: ticketKeys.classDetectionLists(videoId),
              }),
-              queryClient.invalidateQueries({
-                queryKey: ticketKeys.detectionCoordinateLists(videoId),
-              }),
            ]
          : []),
      ]);
--- a/src/app/(modules)/ticket/queries/ticketKeys.ts
+++ b/src/app/(modules)/ticket/queries/ticketKeys.ts
@@ -1,8 +1,4 @@
-import type {
-  DetectionCoordinatesParams,
-  TicketListParams,
-  VideoDetectionsParams,
-} from '@/types';
+import type { TicketListParams, VideoDetectionsParams } from '@/types';

 export const ticketKeys = {
  all: ['tickets'] as const,
@@ -17,23 +13,12 @@ export const ticketKeys = {
    [...ticketKeys.details(), 'video', videoId, 'detections'] as const,
  classDetections: (videoId: string, params: VideoDetectionsParams) =>
    [...ticketKeys.classDetectionLists(videoId), params] as const,
-  detectionCoordinateLists: (videoId: string) =>
-    [
-      ...ticketKeys.details(),
-      'video',
-      videoId,
-      'detection-coordinates',
-    ] as const,
-  detectionCoordinates: (videoId: string, params: DetectionCoordinatesParams) =>
-    [...ticketKeys.detectionCoordinateLists(videoId), params] as const,
  reviewDetections: (videoId: string, proofStatus?: string) =>
    [
      ...ticketKeys.classDetectionLists(videoId),
      'review',
      proofStatus ?? 'all',
    ] as const,
-  defectClasses: (ticketId: string) =>
-    [...ticketKeys.details(), ticketId, 'defect-classes'] as const,
  assignments: (ticketId: string) =>
    [...ticketKeys.details(), ticketId, 'assignments'] as const,
  extensionRequest: (ticketId: string, assignmentId: number | undefined) =>
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,8 +1,8 @@
@import 'tailwindcss';
@import 'tw-animate-css';
@import './typography.css';
-@import "tw-animate-css";
-@import "shadcn/tailwind.css";
+@import 'tw-animate-css';
+@import 'shadcn/tailwind.css';

@custom-variant dark (&:is(.dark *));

@@ -152,7 +152,8 @@
  html {
    @apply font-sans;
  }
-  button:not(:disabled), [role="button"]:not(:disabled) {
+  button:not(:disabled),
+  [role='button']:not(:disabled) {
    cursor: pointer;
  }
 }
@@ -164,4 +165,19 @@
 .detection-video-player
  .vds-slider-preview:has(.vds-slider-thumbnail img[src^='blob:']) {
  display: flex;
-}
+}
+
+.leaflet-tooltip.range-point-label {
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+  padding: 0;
+  font-weight: 700;
+  text-shadow:
+    0 1px 2px rgb(255 255 255 / 95%),
+    0 0 4px rgb(255 255 255 / 95%);
+}
+
+.leaflet-tooltip.range-point-label::before {
+  display: none;
+}
--- a/src/constants/apiRoutes.ts
+++ b/src/constants/apiRoutes.ts
@@ -57,7 +57,6 @@ export const API_ROUTES = {
    ANNOTATION_FRAMES: (id: string) =>
      `/biz/api/v1/results/${id}/annotation-frames`,
    DETECTIONS: (id: string) => `/biz/api/v1/results/${id}/detections`,
-    COORDINATES: (id: string) => `/biz/api/v1/results/${id}/coordinates`,
  },
  DETECTIONS: {
    DISCARD: (id: number) => `/biz/api/v1/detections/${id}/discard`,
@@ -66,7 +65,6 @@ export const API_ROUTES = {
    BASE: '/biz/api/v1/tickets',
    DETAIL: (id: string) => `/biz/api/v1/tickets/${id}`,
    TIMELINE: (id: string) => `/biz/api/v1/tickets/${id}/timeline`,
-    DEFECT_CLASSES: (id: string) => `/biz/api/v1/tickets/${id}/defect-classes`,
    ASSIGNMENTS: (id: string) => `/biz/api/v1/tickets/${id}/assignments`,
    REQUEST_EXTENSION: (ticketId: string, assignmentId: number) =>
      `/biz/api/v1/tickets/${ticketId}/assignments/${assignmentId}/extension-requests`,
--- a/src/constants/defectClassStatus.ts
+++ b/src/constants/defectClassStatus.ts
@@ -1,35 +0,0 @@
-import type { TicketDefectClassTicketStatus } from '@/types';
-
-export const DEFECT_CLASS_STATUS_CONFIG: Record<
-  TicketDefectClassTicketStatus,
-  {
-    label: string;
-    badgeClassName: string;
-  }
-> = {
-  unassigned: {
-    label: 'Unassigned',
-    badgeClassName:
-      'bg-zinc-500/15 text-zinc-600 dark:bg-zinc-500/20 dark:text-zinc-300',
-  },
-  assigned: {
-    label: 'Assigned',
-    badgeClassName:
-      'bg-red-500/15 text-red-600 dark:bg-red-500/20 dark:text-red-400',
-  },
-  under_review: {
-    label: 'Under Review',
-    badgeClassName:
-      'bg-violet-500/15 text-violet-600 dark:bg-violet-500/20 dark:text-violet-400',
-  },
-  approved: {
-    label: 'Approved',
-    badgeClassName:
-      'bg-emerald-500/15 text-emerald-600 dark:bg-emerald-500/20 dark:text-emerald-400',
-  },
-  rejected: {
-    label: 'Rejected',
-    badgeClassName:
-      'bg-orange-500/15 text-orange-600 dark:bg-orange-500/20 dark:text-orange-400',
-  },
-};
--- a/src/services/api/detection.service.ts
+++ b/src/services/api/detection.service.ts
@@ -1,7 +1,5 @@
 import { API_ROUTES } from '@/constants/apiRoutes';
 import type {
-  DetectionCoordinatesParams,
-  DetectionCoordinatesResponse,
  DiscardDetectionPayload,
  DiscardDetectionResponse,
  ReviewDetectionRepairProofPayload,
@@ -11,36 +9,6 @@ import type {
 import axiosClient from '../axios/axios';

 export const detectionService = {
-  getCoordinates: async (
-    videoId: string,
-    params?: DetectionCoordinatesParams,
-  ): Promise<DetectionCoordinatesResponse> => {
-    const searchParams = new URLSearchParams();
-
-    params?.class_name?.forEach((className) => {
-      searchParams.append('class_name', className);
-    });
-    if (params?.skip !== undefined) {
-      searchParams.set('skip', String(params.skip));
-    }
-    if (params?.limit !== undefined) {
-      searchParams.set('limit', String(params.limit));
-    }
-    if (params?.assignment_status) {
-      searchParams.set('assignment_status', params.assignment_status);
-    }
-    if (params?.search) {
-      searchParams.set('search', params.search);
-    }
-
-    const response = await axiosClient.get<DetectionCoordinatesResponse>(
-      API_ROUTES.VIDEOS.COORDINATES(videoId),
-      { params: searchParams },
-    );
-
-    return response.data;
-  },
-
  discardDetection: async (
    detectionId: number,
    payload: DiscardDetectionPayload,
--- a/src/services/api/ticket.service.ts
+++ b/src/services/api/ticket.service.ts
@@ -13,7 +13,6 @@ import type {
  TicketExtensionRequestsResponse,
  TicketExtensionRequestsParams,
  TicketOverviewDetail,
-  TicketDefectClassesResponse,
  TicketListParams,
  TicketListResponse,
  TicketTimelineResponse,
@@ -62,15 +61,6 @@ export const ticketService = {
    return response.data;
  },

-  getTicketDefectClasses: async (
-    ticketId: string,
-  ): Promise<TicketDefectClassesResponse> => {
-    const response = await axiosClient.get<TicketDefectClassesResponse>(
-      API_ROUTES.TICKETS.DEFECT_CLASSES(ticketId),
-    );
-    return response.data;
-  },
-
  getAssignableUsers: async (
    params?: AssignableTicketUsersParams,
  ): Promise<AssignableTicketUsersResponse> => {
--- a/src/types/detection.ts
+++ b/src/types/detection.ts
@@ -5,38 +5,6 @@ export type DetectionClassCount = {
  unique_count: number;
 };

-export type DetectionCoordinateClass = {
-  class_name: string;
-  display_name: string;
-  count: number;
-};
-
-export type DetectionCoordinateItem = {
-  id: number;
-  class_name: string;
-  latitude: number;
-  longitude: number;
-  confidence: number;
-};
-
-export type DetectionAssignmentStatus = 'assigned' | 'unassigned';
-
-export type DetectionCoordinatesParams = {
-  skip?: number;
-  limit?: number;
-  class_name?: string[];
-  assignment_status?: DetectionAssignmentStatus;
-  search?: string;
-};
-
-export type DetectionCoordinatesResponse = {
-  total: number;
-  limit: number;
-  truncated: boolean;
-  classes: DetectionCoordinateClass[];
-  items: DetectionCoordinateItem[];
-};
-
 export type DetectionBoundingBox = {
  x1: number;
  y1: number;
--- a/src/types/ticket/defect-class.ts
+++ b/src/types/ticket/defect-class.ts
@@ -1,19 +0,0 @@
-export type TicketDefectClassTicketStatus =
-  | 'unassigned'
-  | 'assigned'
-  | 'under_review'
-  | 'approved'
-  | 'rejected';
-
-export interface TicketDefectClassItem {
-  class_name: string;
-  display_name: string;
-  assignment_status: TicketDefectClassTicketStatus;
-}
-
-export interface TicketDefectClassesResponse {
-  ticket_id: string;
-  video_id: string;
-  ticket_status: TicketDefectClassTicketStatus;
-  defect_classes: TicketDefectClassItem[];
-}
--- a/src/types/ticket/detail.ts
+++ b/src/types/ticket/detail.ts
@@ -60,6 +60,7 @@ export interface TicketAssignmentSummary {
  pending_detections: number;
  not_submitted_detections: number;
  is_complete: boolean;
+  is_overdue: boolean;
  due_at: string | null;
  note?: string | null;
 }
--- a/src/types/ticket/index.ts
+++ b/src/types/ticket/index.ts
@@ -2,6 +2,5 @@ export * from './status';
 export * from './list';
 export * from './detail';
 export * from './actions';
-export * from './defect-class';
 export * from './events';
 export * from './timeline';
Author	SHA1	Message	Date
santasri.pachhal	0a4d9512cb	feat(ticket-actions): show backend-driven overdue lot warning	2026-07-31 19:38:00 +05:30
santasri.pachhal	faefd34cd4	feat(ticket-actions): show lot context on extension cards	2026-07-31 19:37:20 +05:30
santasri.pachhal	514b42ea91	refactor(ticket): use video detections for assignment map and remove coordinates API	2026-07-31 19:02:25 +05:30
santasri.pachhal	9cd7186357	refactor(ticket): remove defect-classes endpoint and related hooks	2026-07-31 17:25:53 +05:30