feat(ticket): support criteria-based global ticket assignment

2026-07-28 18:47:29 +05:30
parent 0601322361
commit 8e8803396d
16 changed files with 586 additions and 107 deletions
--- a/src/app/(modules)/ticket/[ticketId]/assign/components/AssignTicketForm.tsx
+++ b/src/app/(modules)/ticket/[ticketId]/assign/components/AssignTicketForm.tsx
@@ -1,7 +1,15 @@
 'use client';

 import { useMemo, useState } from 'react';
-import { Mail, Phone, Send, ShieldCheck, Users } from 'lucide-react';
+import {
+  ArrowRight,
+  Mail,
+  MapPin,
+  Phone,
+  Send,
+  ShieldCheck,
+  Users,
+} from 'lucide-react';

 import { DatePickerSimple } from '@/components/form/DatePickerSimple';
 import { AssignableWorkerSelect } from '@/components/lookups/AssignableWorkerSelect';
@@ -12,14 +20,27 @@ import { Textarea } from '@/components/ui/textarea';
 import type { AssignableTicketUser } from '@/types';

 import { useAssignTicketMutation } from '../../../hooks/useTicketQueries';
+import {
+  formatCompactRangeCoordinate,
+  formatRangeCoordinate,
+  type AssignmentRangePoint,
+} from './assignmentRange';

 interface AssignTicketFormProps {
  ticketId: string;
+  videoId?: string;
+  selectedClassNames: string[];
+  startPoint: AssignmentRangePoint | null;
+  endPoint: AssignmentRangePoint | null;
  onAssigned: () => void;
 }

 export function AssignTicketForm({
  ticketId,
+  videoId,
+  selectedClassNames,
+  startPoint,
+  endPoint,
  onAssigned,
 }: AssignTicketFormProps) {
  const [selectedUserId, setSelectedUserId] = useState('');
@@ -28,7 +49,7 @@ export function AssignTicketForm({
  const [dueDate, setDueDate] = useState<Date>();
  const [assignNote, setAssignNote] = useState('');

-  const assignMutation = useAssignTicketMutation(ticketId);
+  const assignMutation = useAssignTicketMutation(ticketId, videoId);
  const today = useMemo(() => {
    const date = new Date();
    date.setHours(0, 0, 0, 0);
@@ -38,6 +59,7 @@ export function AssignTicketForm({
    () => new Date(today.getFullYear() + 20, 11),
    [today],
  );
+  const hasIncompleteLocationRange = Boolean(startPoint) !== Boolean(endPoint);

  return (
    <Card>
@@ -83,6 +105,45 @@ export function AssignTicketForm({
            </div>
          ) : null}

+          {startPoint || endPoint ? (
+            <div className="space-y-2">
+              <Label>Location</Label>
+              <div
+                className="flex min-w-0 items-center gap-2 rounded-lg border px-3 py-2 text-xs"
+                title={[
+                  startPoint ? formatRangeCoordinate(startPoint) : null,
+                  endPoint ? formatRangeCoordinate(endPoint) : null,
+                ]
+                  .filter(Boolean)
+                  .join(' to ')}
+              >
+                <MapPin className="size-4 shrink-0 text-muted-foreground" />
+                <span className="min-w-0 font-mono">
+                  {startPoint
+                    ? formatCompactRangeCoordinate(startPoint)
+                    : endPoint
+                      ? formatCompactRangeCoordinate(endPoint)
+                      : null}
+                </span>
+                {startPoint && endPoint ? (
+                  <>
+                    <ArrowRight className="size-3.5 shrink-0 text-muted-foreground" />
+                    <span className="min-w-0 font-mono">
+                      {formatCompactRangeCoordinate(endPoint)}
+                    </span>
+                  </>
+                ) : null}
+              </div>
+              {hasIncompleteLocationRange ? (
+                <p className="text-xs text-destructive">
+                  {startPoint
+                    ? 'Select an end location to complete the range.'
+                    : 'Select a start location to complete the range.'}
+                </p>
+              ) : null}
+            </div>
+          ) : null}
+
          <div className="space-y-2">
            <Label htmlFor="assign-due-date">
              Due date <span className="text-destructive">*</span>
@@ -114,17 +175,61 @@ export function AssignTicketForm({

          <Button
            type="button"
-            disabled={!selectedUserId || !dueDate || assignMutation.isPending}
+            disabled={
+              !selectedUserId ||
+              !selectedContractor ||
+              !dueDate ||
+              hasIncompleteLocationRange ||
+              assignMutation.isPending
+            }
            onClick={() => {
-              if (!selectedUserId || !dueDate) return;
+              if (
+                !selectedUserId ||
+                !selectedContractor ||
+                !dueDate ||
+                hasIncompleteLocationRange
+              ) {
+                return;
+              }
+
+              const note = assignNote.trim() || undefined;
+              const hasCriteria =
+                selectedClassNames.length > 0 ||
+                Boolean(startPoint && endPoint);

              assignMutation.mutate(
                {
                  assigned_to_user_id: Number(selectedUserId),
+                  assigned_to_email: selectedContractor.email,
                  due_at: dueDate.toISOString(),
-                  note: assignNote || undefined,
+                  note,
+                  ...(hasCriteria
+                    ? {
+                        criteria: {
+                          ...(selectedClassNames.length > 0
+                            ? { class_names: selectedClassNames }
+                            : {}),
+                          ...(startPoint && endPoint
+                            ? {
+                                start_lat: startPoint.latitude,
+                                start_lng: startPoint.longitude,
+                                end_lat: endPoint.latitude,
+                                end_lng: endPoint.longitude,
+                              }
+                            : {}),
+                        },
+                      }
+                    : {}),
+                },
+                {
+                  onSuccess: () => {
+                    setSelectedUserId('');
+                    setSelectedContractor(null);
+                    setDueDate(undefined);
+                    setAssignNote('');
+                    onAssigned();
+                  },
                },
-                { onSuccess: onAssigned },
              );
            }}
            className="w-full sm:w-auto"
--- a/src/app/(modules)/ticket/[ticketId]/assign/components/AssignmentIssuesMap.tsx
+++ b/src/app/(modules)/ticket/[ticketId]/assign/components/AssignmentIssuesMap.tsx
@@ -19,12 +19,19 @@ import {
  CardTitle,
 } from '@/components/ui/card';

+import type { AssignmentRangePoint } from './assignmentRange';
+import { AssignmentRangeActions } from './AssignmentRangeActions';
+
 type AssignmentIssuesMapProps = {
  data?: DetectionCoordinatesResponse;
  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;
 };
@@ -33,7 +40,11 @@ type ClientAssignmentIssuesMapProps = {
  items: DetectionCoordinateItem[];
  classes: DetectionCoordinateClass[];
  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) {
@@ -49,8 +60,9 @@ function isValidCoordinate(item: DetectionCoordinateItem) {

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

    function FitMapToIssues({ items }: { items: DetectionCoordinateItem[] }) {
      const map = useMap();
@@ -81,8 +93,13 @@ const ClientAssignmentIssuesMap = dynamic<ClientAssignmentIssuesMapProps>(
      items,
      classes,
      selectedDetectionId,
+      startPoint,
+      endPoint,
      onSelectDetection,
+      onSetStart,
+      onSetEnd,
    }: ClientAssignmentIssuesMapProps) {
+      const markerRenderer = useMemo(() => canvas({ tolerance: 12 }), []);
      const displayNames = new Map(
        classes.map((item) => [item.class_name, item.display_name]),
      );
@@ -108,30 +125,48 @@ const ClientAssignmentIssuesMap = dynamic<ClientAssignmentIssuesMapProps>(
            const visual = getDefectVisual(item.class_name);
            const IssueIcon = visual.icon;
            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 rangeColor = isStart
+              ? '#16a34a'
+              : isEnd
+                ? '#dc2626'
+                : visual.boundingBoxColor;
+            const isRangeIssue = isStart || isEnd;
            const displayName =
              displayNames.get(item.class_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]}
-                radius={isSelected ? 11 : 8}
+                renderer={markerRenderer}
+                radius={isSelected || isRangeIssue ? 11 : 8}
                pathOptions={{
-                  color: isSelected ? '#ffffff' : visual.boundingBoxColor,
-                  fillColor: visual.boundingBoxColor,
-                  fillOpacity: isSelected ? 1 : 0.82,
-                  weight: isSelected ? 4 : 2,
+                  color:
+                    isSelected || isRangeIssue
+                      ? '#ffffff'
+                      : visual.boundingBoxColor,
+                  fillColor: rangeColor,
+                  fillOpacity: isSelected || isRangeIssue ? 1 : 0.82,
+                  weight: isSelected || isRangeIssue ? 4 : 2,
                }}
                eventHandlers={{
                  click: () => onSelectDetection(item.id),
                }}
              >
-                <Popup>
-                  <div className="min-w-52 space-y-3">
-                    <div className="flex items-center gap-2">
+                <Popup minWidth={240} maxWidth={280}>
+                  <div className="w-60">
+                    <div className="flex items-start gap-3 border-b pb-3 pr-4">
                      <span
-                        className="flex size-8 items-center justify-center rounded-full"
+                        className="flex size-9 shrink-0 items-center justify-center rounded-full"
                        style={{
                          backgroundColor: `${visual.boundingBoxColor}1f`,
                          color: visual.boundingBoxColor,
@@ -139,32 +174,63 @@ const ClientAssignmentIssuesMap = dynamic<ClientAssignmentIssuesMapProps>(
                      >
                        <IssueIcon className="size-4" />
                      </span>
-                      <div>
-                        <p className="font-semibold capitalize">
+                      <div className="min-w-0 flex-1">
+                        <p className="!m-0 truncate text-sm font-semibold leading-5">
                          {displayName}
                        </p>
-                        <p className="text-xs text-muted-foreground">
+                        <p className="!m-0 text-xs leading-4 text-muted-foreground">
                          Detection #{item.id}
                        </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'}
+                        >
+                          {rangeLabel}
+                        </span>
+                      ) : null}
                    </div>

-                    <dl className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-sm">
-                      <dt className="text-muted-foreground">Confidence</dt>
-                      <dd className="text-right font-medium">
-                        {Math.round(item.confidence * 100)}%
-                      </dd>
-                      <dt className="text-muted-foreground">Latitude</dt>
-                      <dd className="text-right font-mono text-xs">
-                        {item.latitude.toFixed(6)}
-                      </dd>
-                      <dt className="text-muted-foreground">Longitude</dt>
-                      <dd className="text-right font-mono text-xs">
-                        {item.longitude.toFixed(6)}
-                      </dd>
+                    <dl className="!m-0 space-y-2 py-3 text-sm">
+                      <div className="flex items-center justify-between gap-4">
+                        <dt className="text-muted-foreground">Confidence</dt>
+                        <dd className="!m-0 font-medium tabular-nums">
+                          {Math.round(item.confidence * 100)}%
+                        </dd>
+                      </div>
+                      <div className="flex items-center justify-between gap-4">
+                        <dt className="text-muted-foreground">Latitude</dt>
+                        <dd className="!m-0 font-mono text-xs tabular-nums">
+                          {item.latitude.toFixed(6)}
+                        </dd>
+                      </div>
+                      <div className="flex items-center justify-between gap-4">
+                        <dt className="text-muted-foreground">Longitude</dt>
+                        <dd className="!m-0 font-mono text-xs tabular-nums">
+                          {item.longitude.toFixed(6)}
+                        </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>
+                ) : null}
              </CircleMarker>
            );
          })}
@@ -184,6 +250,10 @@ export function AssignmentIssuesMap({
  isFetchingMore,
  isError,
  hasMore,
+  startPoint,
+  endPoint,
+  onSetStart,
+  onSetEnd,
  onLoadMore,
  onRetry,
 }: AssignmentIssuesMapProps) {
@@ -217,7 +287,7 @@ export function AssignmentIssuesMap({
            <div>
              <CardTitle className="text-base">Issues on Map</CardTitle>
              <CardDescription>
-                Click a map point to view the issue details.
+                Click a marker, then choose Start or End.
              </CardDescription>
            </div>
          </div>
@@ -261,7 +331,11 @@ export function AssignmentIssuesMap({
                items={validItems}
                classes={data?.classes ?? []}
                selectedDetectionId={selectedDetectionId}
+                startPoint={startPoint}
+                endPoint={endPoint}
                onSelectDetection={setSelectedDetectionId}
+                onSetStart={onSetStart}
+                onSetEnd={onSetEnd}
              />
            </div>

--- a/src/app/(modules)/ticket/[ticketId]/assign/components/AssignmentRangeActions.tsx
+++ b/src/app/(modules)/ticket/[ticketId]/assign/components/AssignmentRangeActions.tsx
@@ -0,0 +1,66 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+
+import type { AssignmentRangePoint } from './assignmentRange';
+
+interface AssignmentRangeActionsProps {
+  point: AssignmentRangePoint;
+  startPoint: AssignmentRangePoint | null;
+  endPoint: AssignmentRangePoint | null;
+  onSetStart: (point: AssignmentRangePoint) => void;
+  onSetEnd: (point: AssignmentRangePoint) => void;
+  stretch?: boolean;
+  className?: string;
+}
+
+export function AssignmentRangeActions({
+  point,
+  startPoint,
+  endPoint,
+  onSetStart,
+  onSetEnd,
+  stretch = false,
+  className,
+}: AssignmentRangeActionsProps) {
+  const isStart = point.detectionId === startPoint?.detectionId;
+  const isEnd = point.detectionId === endPoint?.detectionId;
+
+  return (
+    <div className={cn('flex items-center gap-1', className)}>
+      <Button
+        type="button"
+        size="xs"
+        variant={isStart ? 'secondary' : 'outline'}
+        className={cn(stretch && 'flex-1')}
+        disabled={isStart}
+        aria-pressed={isStart}
+        title={isStart ? 'Selected as start' : 'Set as start'}
+        onClick={() => onSetStart(point)}
+      >
+        Start
+      </Button>
+      <Button
+        type="button"
+        size="xs"
+        variant={isEnd ? 'secondary' : 'outline'}
+        className={cn(stretch && 'flex-1')}
+        disabled={startPoint === null || isStart || isEnd}
+        aria-pressed={isEnd}
+        title={
+          startPoint === null
+            ? 'Select a start issue first'
+            : isStart
+              ? 'Choose another issue for the end'
+              : isEnd
+                ? 'Selected as end'
+                : 'Set as end'
+        }
+        onClick={() => onSetEnd(point)}
+      >
+        End
+      </Button>
+    </div>
+  );
+}
--- a/src/app/(modules)/ticket/[ticketId]/assign/components/ChooseIssuesSection.tsx
+++ b/src/app/(modules)/ticket/[ticketId]/assign/components/ChooseIssuesSection.tsx
@@ -1,16 +1,22 @@
 'use client';

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

 import { MultiSelectPopover } from '@/components/form/MultiSelectPopover';
-import { Input } from '@/components/ui/input';
-import { useDebounce } from '@/hooks/useDebounce';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';

 import {
  useDetectionCoordinatesQuery,
  useTicketDetectionsQuery,
 } from '../../../hooks/useTicketQueries';
+import {
+  formatCompactRangeCoordinate,
+  formatRangeCoordinate,
+  type AssignmentRangePoint,
+} from './assignmentRange';
 import { AssignmentIssuesMap } from './AssignmentIssuesMap';
 import { useIssueColumns } from './IssueColumns';
 import { IssueTable } from './IssueTable';
@@ -27,30 +33,66 @@ interface IssueTypeOption {
 interface ChooseIssuesSectionProps {
  videoId?: string;
  issueTypes: IssueTypeOption[];
+  selectedIssueTypes: string[];
+  startPoint: AssignmentRangePoint | null;
+  endPoint: AssignmentRangePoint | null;
+  onSelectedIssueTypesChange: (values: string[]) => void;
+  onStartPointChange: (point: AssignmentRangePoint | null) => void;
+  onEndPointChange: (point: AssignmentRangePoint | null) => void;
 }

 export function ChooseIssuesSection({
  videoId,
  issueTypes,
+  selectedIssueTypes,
+  startPoint,
+  endPoint,
+  onSelectedIssueTypesChange,
+  onStartPointChange,
+  onEndPointChange,
 }: ChooseIssuesSectionProps) {
-  const [selectedIssueTypes, setSelectedIssueTypes] = useState<string[]>([]);
-  const [detectionSearch, setDetectionSearch] = useState('');
  const [skip, setSkip] = useState(0);
  const [limit, setLimit] = useState(DEFAULT_PAGE_SIZE);
-  const debouncedSearch = useDebounce(detectionSearch.trim(), 350);
-  const columns = useIssueColumns();
+  const handleSetStart = useCallback(
+    (point: AssignmentRangePoint) => {
+      onStartPointChange(point);
+      onEndPointChange(null);
+    },
+    [onEndPointChange, onStartPointChange],
+  );
+  const handleSetEnd = useCallback(
+    (point: AssignmentRangePoint) => {
+      if (point.detectionId === startPoint?.detectionId) return;
+
+      onEndPointChange(point);
+    },
+    [onEndPointChange, startPoint?.detectionId],
+  );
+  const columns = useIssueColumns({
+    startPoint,
+    endPoint,
+    onSetStart: handleSetStart,
+    onSetEnd: handleSetEnd,
+  });
  const issueTypeOptions = useMemo(
    () =>
      issueTypes.map((issue) => ({
        value: issue.class_name,
-        label: `${issue.display_name} (${issue.count})`,
+        label: issue.display_name,
      })),
    [issueTypes],
  );
-
+  const handleIssueTypesChange = useCallback(
+    (values: string[]) => {
+      onSelectedIssueTypesChange(values);
+      onStartPointChange(null);
+      onEndPointChange(null);
+    },
+    [onEndPointChange, onSelectedIssueTypesChange, onStartPointChange],
+  );
  useEffect(() => {
    setSkip(0);
-  }, [debouncedSearch, selectedIssueTypes]);
+  }, [selectedIssueTypes]);

  const queryParams = useMemo(
    () => ({
@@ -58,10 +100,9 @@ export function ChooseIssuesSection({
      limit,
      class_name:
        selectedIssueTypes.length > 0 ? selectedIssueTypes : undefined,
-      search: debouncedSearch || undefined,
      sort: 'timestamp_asc',
    }),
-    [debouncedSearch, limit, selectedIssueTypes, skip],
+    [limit, selectedIssueTypes, skip],
  );
  const detectionsQuery = useTicketDetectionsQuery(videoId, queryParams);
  const mapQueryParams = useMemo(
@@ -69,9 +110,9 @@ export function ChooseIssuesSection({
      limit: MAP_PAGE_SIZE,
      class_name:
        selectedIssueTypes.length > 0 ? selectedIssueTypes : undefined,
-      search: debouncedSearch || undefined,
+      assignment_status: 'unassigned' as const,
    }),
-    [debouncedSearch, selectedIssueTypes],
+    [selectedIssueTypes],
  );
  const coordinatesQuery = useDetectionCoordinatesQuery(
    videoId,
@@ -94,34 +135,67 @@ export function ChooseIssuesSection({

  return (
    <div className="min-w-0 space-y-5">
-      <div
-        aria-label="Issue filters"
-        className="flex flex-col gap-3 sm:flex-row sm:items-center"
-      >
-        <div className="w-fit">
-          <MultiSelectPopover
-            label="Issue Types"
-            options={issueTypeOptions}
-            values={selectedIssueTypes}
-            onValuesChange={setSelectedIssueTypes}
-            searchPlaceholder="Search issue types"
-            emptyMessage="No issue types found."
-            align="start"
-          />
-        </div>
+      <Card size="sm" aria-label="Issue filters">
+        <CardHeader>
+          <CardTitle>Filters</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="flex flex-wrap items-center gap-2">
+            <MultiSelectPopover
+              label="Issue Types"
+              options={issueTypeOptions}
+              values={selectedIssueTypes}
+              onValuesChange={handleIssueTypesChange}
+              searchPlaceholder="Search issue types"
+              emptyMessage="No issue types found."
+              emptySelectionLabel="All"
+              align="start"
+            />

-        <div className="relative w-full sm:ml-auto sm:w-72">
-          <Search className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
-          <Input
-            id="assignment-issue-search"
-            value={detectionSearch}
-            onChange={(event) => setDetectionSearch(event.target.value)}
-            placeholder="Search by detection ID"
-            aria-label="Search by detection ID"
-            className="pl-9"
-          />
-        </div>
-      </div>
+            {startPoint ? (
+              <Badge
+                variant="outline"
+                className="h-8 gap-1.5 px-2.5 font-normal"
+                title={formatRangeCoordinate(startPoint)}
+              >
+                <span className="font-medium">Start</span>
+                <span className="font-mono">
+                  {formatCompactRangeCoordinate(startPoint)}
+                </span>
+              </Badge>
+            ) : null}
+
+            {endPoint ? (
+              <Badge
+                variant="outline"
+                className="h-8 gap-1.5 px-2.5 font-normal"
+                title={formatRangeCoordinate(endPoint)}
+              >
+                <span className="font-medium">End</span>
+                <span className="font-mono">
+                  {formatCompactRangeCoordinate(endPoint)}
+                </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}
@@ -129,6 +203,10 @@ export function ChooseIssuesSection({
        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()}
      />
@@ -136,7 +214,7 @@ export function ChooseIssuesSection({
      <IssueTable
        columns={columns}
        issues={result?.items ?? []}
-        isLoading={detectionsQuery.isLoading || detectionsQuery.isFetching}
+        isLoading={detectionsQuery.isLoading}
        isError={detectionsQuery.isError}
        toolbar={null}
        skip={skip}
--- a/src/app/(modules)/ticket/[ticketId]/assign/components/IssueColumns.tsx
+++ b/src/app/(modules)/ticket/[ticketId]/assign/components/IssueColumns.tsx
@@ -3,15 +3,32 @@
 import { useMemo } from 'react';
 import type { ColumnDef } from '@tanstack/react-table';

+import { Badge } from '@/components/ui/badge';
+import { getDefectVisual } from '@/constants/defectVisualConfig';
 import type { DetectionResultItem } from '@/types';

+import type { AssignmentRangePoint } from './assignmentRange';
+import { AssignmentRangeActions } from './AssignmentRangeActions';
+
 function formatTimestamp(seconds: number) {
  const minutes = Math.floor(seconds / 60);
  const remainingSeconds = Math.floor(seconds % 60);
  return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
 }

-export function useIssueColumns(): ColumnDef<DetectionResultItem>[] {
+interface UseIssueColumnsOptions {
+  startPoint: AssignmentRangePoint | null;
+  endPoint: AssignmentRangePoint | null;
+  onSetStart: (point: AssignmentRangePoint) => void;
+  onSetEnd: (point: AssignmentRangePoint) => void;
+}
+
+export function useIssueColumns({
+  startPoint,
+  endPoint,
+  onSetStart,
+  onSetEnd,
+}: UseIssueColumnsOptions): ColumnDef<DetectionResultItem>[] {
  return useMemo(
    () => [
      {
@@ -24,20 +41,53 @@ export function useIssueColumns(): ColumnDef<DetectionResultItem>[] {
        id: 'issue_type',
        header: 'Issue Type',
        size: 180,
-        cell: ({ row }) => row.original.detection.display_name,
+        cell: ({ row }) => {
+          const { class_name: className, display_name: displayName } =
+            row.original.detection;
+          const visual = getDefectVisual(className);
+          const IssueIcon = visual.icon;
+
+          return (
+            <Badge
+              variant="outline"
+              className="h-5 gap-1.5 px-2 font-normal"
+              style={{
+                borderColor: `${visual.boundingBoxColor}66`,
+                backgroundColor: `${visual.boundingBoxColor}14`,
+                color: visual.boundingBoxColor,
+              }}
+            >
+              <IssueIcon />
+              {displayName}
+            </Badge>
+          );
+        },
      },
      {
-        id: 'confidence',
-        header: 'Confidence',
-        size: 130,
-        cell: ({ row }) =>
-          `${Math.round(row.original.detection.confidence * 100)}%`,
-      },
-      {
-        id: 'frame',
-        header: 'Frame',
-        size: 100,
-        cell: ({ row }) => row.original.frame.number,
+        id: 'coordinates',
+        header: 'Coordinates',
+        size: 220,
+        cell: ({ row }) => {
+          const issueId = row.original.detection.id;
+          const { latitude, longitude } = row.original.location;
+
+          if (latitude === null || longitude === null) {
+            return <span className="text-muted-foreground">Unavailable</span>;
+          }
+
+          return (
+            <div>
+              <p className="font-mono text-xs">
+                {latitude.toFixed(6)}, {longitude.toFixed(6)}
+              </p>
+              {issueId === startPoint?.detectionId ? (
+                <p className="text-xs font-medium text-green-600">Start</p>
+              ) : issueId === endPoint?.detectionId ? (
+                <p className="text-xs font-medium text-red-600">End</p>
+              ) : null}
+            </div>
+          );
+        },
      },
      {
        id: 'timestamp',
@@ -46,7 +96,44 @@ export function useIssueColumns(): ColumnDef<DetectionResultItem>[] {
        cell: ({ row }) =>
          formatTimestamp(row.original.frame.timestamp_seconds),
      },
+      {
+        id: 'range_actions',
+        header: 'Set range',
+        size: 150,
+        cell: ({ row }) => {
+          const detectionId = row.original.detection.id;
+          const { latitude, longitude } = row.original.location;
+          const hasValidCoordinate =
+            latitude !== null &&
+            longitude !== null &&
+            Number.isFinite(latitude) &&
+            Number.isFinite(longitude) &&
+            latitude >= -90 &&
+            latitude <= 90 &&
+            longitude >= -180 &&
+            longitude <= 180;
+
+          if (!hasValidCoordinate) {
+            return <span className="text-muted-foreground">Unavailable</span>;
+          }
+
+          const point: AssignmentRangePoint = {
+            detectionId,
+            latitude,
+            longitude,
+          };
+          return (
+            <AssignmentRangeActions
+              point={point}
+              startPoint={startPoint}
+              endPoint={endPoint}
+              onSetStart={onSetStart}
+              onSetEnd={onSetEnd}
+            />
+          );
+        },
+      },
    ],
-    [],
+    [endPoint, onSetEnd, onSetStart, startPoint],
  );
 }
--- a/src/app/(modules)/ticket/[ticketId]/assign/components/IssueTable.tsx
+++ b/src/app/(modules)/ticket/[ticketId]/assign/components/IssueTable.tsx
@@ -33,7 +33,7 @@ export function IssueTable({
 }: IssueTableProps) {
  return (
    <DataTable
-      title="Choose Issues"
+      title="Issue details"
      columns={columns}
      data={issues}
      isLoading={isLoading}
--- a/src/app/(modules)/ticket/[ticketId]/assign/components/assignmentRange.ts
+++ b/src/app/(modules)/ticket/[ticketId]/assign/components/assignmentRange.ts
@@ -0,0 +1,13 @@
+export interface AssignmentRangePoint {
+  detectionId: number;
+  latitude: number;
+  longitude: number;
+}
+
+export function formatRangeCoordinate(point: AssignmentRangePoint) {
+  return `${point.latitude.toFixed(6)}, ${point.longitude.toFixed(6)}`;
+}
+
+export function formatCompactRangeCoordinate(point: AssignmentRangePoint) {
+  return `${point.latitude.toFixed(4)}, ${point.longitude.toFixed(4)}`;
+}