feat(ticket): add issues map to ticket assignment page

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

@@ -0,0 +1,322 @@
+'use client';
+
+import { useEffect, useMemo, useState } from 'react';
+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 { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+
+type AssignmentIssuesMapProps = {
+  data?: DetectionCoordinatesResponse;
+  isLoading: boolean;
+  isFetchingMore: boolean;
+  isError: boolean;
+  hasMore: boolean;
+  onLoadMore: () => void;
+  onRetry: () => void;
+};
+
+type ClientAssignmentIssuesMapProps = {
+  items: DetectionCoordinateItem[];
+  classes: DetectionCoordinateClass[];
+  selectedDetectionId: number | null;
+  onSelectDetection: (detectionId: number) => 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
+  );
+}
+
+const ClientAssignmentIssuesMap = dynamic<ClientAssignmentIssuesMapProps>(
+  async () => {
+    const { CircleMarker, MapContainer, Popup, TileLayer, useMap } =
+      await import('react-leaflet');
+
+    function FitMapToIssues({ items }: { items: DetectionCoordinateItem[] }) {
+      const map = useMap();
+
+      useEffect(() => {
+        if (items.length === 0) return;
+
+        if (items.length === 1) {
+          map.setView([items[0].latitude, items[0].longitude], 17);
+          return;
+        }
+
+        map.fitBounds(
+          items.map(
+            (item) => [item.latitude, item.longitude] as [number, number],
+          ),
+          {
+            padding: [32, 32],
+            maxZoom: 17,
+          },
+        );
+      }, [items, map]);
+
+      return null;
+    }
+
+    return function ClientAssignmentIssuesMapInner({
+      items,
+      classes,
+      selectedDetectionId,
+      onSelectDetection,
+    }: ClientAssignmentIssuesMapProps) {
+      const displayNames = new Map(
+        classes.map((item) => [item.class_name, item.display_name]),
+      );
+      const initialCenter: [number, number] = [
+        items[0].latitude,
+        items[0].longitude,
+      ];
+
+      return (
+        <MapContainer
+          center={initialCenter}
+          zoom={15}
+          scrollWheelZoom
+          className="h-full w-full"
+        >
+          <TileLayer
+            attribution="&copy; OpenStreetMap contributors"
+            url="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
+          />
+          <FitMapToIssues items={items} />
+
+          {items.map((item) => {
+            const visual = getDefectVisual(item.class_name);
+            const IssueIcon = visual.icon;
+            const isSelected = selectedDetectionId === item.id;
+            const displayName =
+              displayNames.get(item.class_name) ??
+              item.class_name.replaceAll('_', ' ');
+
+            return (
+              <CircleMarker
+                key={item.id}
+                center={[item.latitude, item.longitude]}
+                radius={isSelected ? 11 : 8}
+                pathOptions={{
+                  color: isSelected ? '#ffffff' : visual.boundingBoxColor,
+                  fillColor: visual.boundingBoxColor,
+                  fillOpacity: isSelected ? 1 : 0.82,
+                  weight: isSelected ? 4 : 2,
+                }}
+                eventHandlers={{
+                  click: () => onSelectDetection(item.id),
+                }}
+              >
+                <Popup>
+                  <div className="min-w-52 space-y-3">
+                    <div className="flex items-center gap-2">
+                      <span
+                        className="flex size-8 items-center justify-center rounded-full"
+                        style={{
+                          backgroundColor: `${visual.boundingBoxColor}1f`,
+                          color: visual.boundingBoxColor,
+                        }}
+                      >
+                        <IssueIcon className="size-4" />
+                      </span>
+                      <div>
+                        <p className="font-semibold capitalize">
+                          {displayName}
+                        </p>
+                        <p className="text-xs text-muted-foreground">
+                          Detection #{item.id}
+                        </p>
+                      </div>
+                    </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>
+                  </div>
+                </Popup>
+              </CircleMarker>
+            );
+          })}
+        </MapContainer>
+      );
+    };
+  },
+  {
+    ssr: false,
+    loading: () => <div className="size-full animate-pulse bg-muted" />,
+  },
+);
+
+export function AssignmentIssuesMap({
+  data,
+  isLoading,
+  isFetchingMore,
+  isError,
+  hasMore,
+  onLoadMore,
+  onRetry,
+}: AssignmentIssuesMapProps) {
+  const [selectedDetectionId, setSelectedDetectionId] = useState<number | null>(
+    null,
+  );
+  const validItems = useMemo(
+    () => (data?.items ?? []).filter(isValidCoordinate),
+    [data?.items],
+  );
+  const total = data?.total ?? 0;
+  const loadedCount = Math.min(data?.items.length ?? 0, total);
+
+  useEffect(() => {
+    if (
+      selectedDetectionId !== null &&
+      !validItems.some((item) => item.id === selectedDetectionId)
+    ) {
+      setSelectedDetectionId(null);
+    }
+  }, [selectedDetectionId, validItems]);
+
+  return (
+    <Card className="overflow-hidden">
+      <CardHeader className="border-b">
+        <div className="flex items-start justify-between gap-4">
+          <div className="flex items-start gap-3">
+            <div className="rounded-lg bg-secondary p-2">
+              <MapPinned className="size-5 text-primary" />
+            </div>
+            <div>
+              <CardTitle className="text-base">Issues on Map</CardTitle>
+              <CardDescription>
+                Click a map point to view the issue details.
+              </CardDescription>
+            </div>
+          </div>
+          {data ? (
+            <span className="shrink-0 text-sm text-muted-foreground">
+              {validItems.length} mapped
+            </span>
+          ) : null}
+        </div>
+      </CardHeader>
+
+      <CardContent className="p-0">
+        {isLoading ? (
+          <div className="h-[440px] animate-pulse bg-muted" />
+        ) : isError ? (
+          <div className="flex min-h-72 flex-col items-center justify-center gap-3 px-6 text-center">
+            <AlertTriangle className="size-7 text-destructive" />
+            <div>
+              <p className="font-medium">Unable to load issue locations.</p>
+              <p className="mt-1 text-sm text-muted-foreground">
+                Check the connection and try again.
+              </p>
+            </div>
+            <Button type="button" variant="outline" onClick={onRetry}>
+              <RefreshCw />
+              Retry
+            </Button>
+          </div>
+        ) : validItems.length === 0 ? (
+          <div className="flex min-h-72 flex-col items-center justify-center px-6 text-center">
+            <MapPinned className="size-7 text-muted-foreground" />
+            <p className="mt-3 font-medium">No issue locations available.</p>
+            <p className="mt-1 text-sm text-muted-foreground">
+              Detections without valid coordinates cannot be placed on the map.
+            </p>
+          </div>
+        ) : (
+          <>
+            <div className="h-[440px] min-w-0 bg-muted">
+              <ClientAssignmentIssuesMap
+                items={validItems}
+                classes={data?.classes ?? []}
+                selectedDetectionId={selectedDetectionId}
+                onSelectDetection={setSelectedDetectionId}
+              />
+            </div>
+
+            <div
+              className="flex flex-wrap items-center gap-x-4 gap-y-2 border-t px-4 py-3"
+              aria-label="Map legend"
+            >
+              <span className="text-sm font-medium">Map legend</span>
+              {(data?.classes ?? []).map((item) => {
+                const visual = getDefectVisual(item.class_name);
+                const IssueIcon = visual.icon;
+
+                return (
+                  <div
+                    key={item.class_name}
+                    className="flex items-center gap-2 text-sm text-muted-foreground"
+                  >
+                    <span
+                      className="flex size-6 items-center justify-center rounded-full"
+                      style={{
+                        backgroundColor: `${visual.boundingBoxColor}1f`,
+                        color: visual.boundingBoxColor,
+                      }}
+                    >
+                      <IssueIcon className="size-3.5" />
+                    </span>
+                    <span>{item.display_name}</span>
+                  </div>
+                );
+              })}
+            </div>
+
+            <div className="flex items-center justify-between gap-3 border-t px-4 py-3">
+              <span className="text-sm text-muted-foreground">
+                Showing {loadedCount} of {total}
+              </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>
+          </>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -7,11 +7,16 @@ import { MultiSelectPopover } from '@/components/form/MultiSelectPopover';
 import { Input } from '@/components/ui/input';
 import { useDebounce } from '@/hooks/useDebounce';
 
-import { useTicketDetectionsQuery } from '../../../hooks/useTicketQueries';
+import {
+  useDetectionCoordinatesQuery,
+  useTicketDetectionsQuery,
+} from '../../../hooks/useTicketQueries';
+import { AssignmentIssuesMap } from './AssignmentIssuesMap';
 import { useIssueColumns } from './IssueColumns';
 import { IssueTable } from './IssueTable';
 
 const DEFAULT_PAGE_SIZE = 10;
+const MAP_PAGE_SIZE = 50;
 
 interface IssueTypeOption {
   class_name: string;
@@ -59,44 +64,87 @@ export function ChooseIssuesSection({
     [debouncedSearch, limit, selectedIssueTypes, skip],
   );
   const detectionsQuery = useTicketDetectionsQuery(videoId, queryParams);
+  const mapQueryParams = useMemo(
+    () => ({
+      limit: MAP_PAGE_SIZE,
+      class_name:
+        selectedIssueTypes.length > 0 ? selectedIssueTypes : undefined,
+      search: debouncedSearch || undefined,
+    }),
+    [debouncedSearch, selectedIssueTypes],
+  );
+  const coordinatesQuery = useDetectionCoordinatesQuery(
+    videoId,
+    mapQueryParams,
+  );
   const result = detectionsQuery.data;
+  const mapData = useMemo(() => {
+    const pages = coordinatesQuery.data?.pages;
+
+    if (!pages?.length) return undefined;
+
+    const latestPage = pages[pages.length - 1];
+
+    return {
+      ...latestPage,
+      items: pages.flatMap((page) => page.items),
+      truncated: Boolean(coordinatesQuery.hasNextPage),
+    };
+  }, [coordinatesQuery.data?.pages, coordinatesQuery.hasNextPage]);
 
   return (
-    <IssueTable
-      columns={columns}
-      issues={result?.items ?? []}
-      isLoading={detectionsQuery.isLoading || detectionsQuery.isFetching}
-      isError={detectionsQuery.isError}
-      toolbar={
-        <div 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>
-          <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
-              value={detectionSearch}
-              onChange={(event) => setDetectionSearch(event.target.value)}
-              placeholder="Search by detection ID"
-              aria-label="Search by detection ID"
-              className="pl-9"
-            />
-          </div>
+    <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>
-      }
-      skip={skip}
-      limit={limit}
-      total={result?.total ?? 0}
-      onPageChange={setSkip}
-      onLimitChange={setLimit}
-    />
+
+        <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>
+
+      <AssignmentIssuesMap
+        data={mapData}
+        isLoading={coordinatesQuery.isLoading}
+        isFetchingMore={coordinatesQuery.isFetchingNextPage}
+        isError={coordinatesQuery.isError}
+        hasMore={Boolean(coordinatesQuery.hasNextPage)}
+        onLoadMore={() => void coordinatesQuery.fetchNextPage()}
+        onRetry={() => void coordinatesQuery.refetch()}
+      />
+
+      <IssueTable
+        columns={columns}
+        issues={result?.items ?? []}
+        isLoading={detectionsQuery.isLoading || detectionsQuery.isFetching}
+        isError={detectionsQuery.isError}
+        toolbar={null}
+        skip={skip}
+        limit={limit}
+        total={result?.total ?? 0}
+        onPageChange={setSkip}
+        onLimitChange={setLimit}
+      />
+    </div>
   );
 }