feat(ticket): scope issue preview to selected assignment lot

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

@@ -1,5 +1,6 @@
 'use client';
 
+import { useEffect } from 'react';
 import { BriefcaseBusiness, CalendarClock, ListChecks } from 'lucide-react';
 
 import { PersonInfo } from '@/components/person-avatar';
@@ -14,6 +15,7 @@ import {
 } from '@/components/ui/card';
 import { Progress } from '@/components/ui/progress';
 import { getDefectVisual } from '@/constants/defectVisualConfig';
+import { cn } from '@/lib/utils';
 import type { TicketActor, TicketAssignmentSummary } from '@/types';
 import { formatDate } from '@/utils/date';
 
@@ -22,6 +24,8 @@ import { useTicketAssignmentsQuery } from '../../hooks/useTicketQueries';
 interface TicketAssignmentsCardProps {
   ticketId: string;
   initialAssignments?: TicketAssignmentSummary[];
+  selectedAssignmentId?: number;
+  onAssignmentChange: (assignmentId: number) => void;
 }
 
 function formatLabel(value: string) {
@@ -60,22 +64,22 @@ function AssignmentProgress({
   const progress = total > 0 ? Math.min((approved / total) * 100, 100) : 0;
 
   return (
-    <div className="space-y-2">
-      <div className="flex items-center justify-between gap-3 text-xs">
+    <div className="min-w-0 space-y-2">
+      <div className="flex min-w-0 flex-col gap-1 text-xs sm:flex-row sm:items-center sm:justify-between sm:gap-3">
         <span className="font-medium text-foreground">Repair progress</span>
         <span className="tabular-nums text-muted-foreground">
           {approved} of {total} approved
         </span>
       </div>
       <Progress value={assignment.is_complete ? 100 : progress} />
-      <div className="grid grid-cols-3 gap-2 text-xs">
-        <span className="text-emerald-600">
+      <div className="flex min-w-0 flex-wrap gap-x-4 gap-y-1 text-xs">
+        <span className="whitespace-nowrap text-emerald-600">
           {assignment.approved_detections} approved
         </span>
-        <span className="text-amber-600">
+        <span className="whitespace-nowrap text-amber-600">
           {assignment.pending_detections} pending
         </span>
-        <span className="text-muted-foreground">
+        <span className="whitespace-nowrap text-muted-foreground">
           {assignment.not_submitted_detections} not submitted
         </span>
       </div>
@@ -102,7 +106,7 @@ function AssignmentLot({
   };
 
   return (
-    <div className="space-y-4 rounded-lg border p-4">
+    <div className="min-w-0 space-y-4 rounded-lg border p-3 sm:p-4">
       <div className="min-w-0">
         <p className="mb-2 text-xs font-medium text-muted-foreground">
           Lot {assignment.id}
@@ -110,7 +114,7 @@ function AssignmentLot({
         <PersonInfo person={worker} />
       </div>
 
-      <div className="flex flex-wrap items-center gap-2">
+      <div className="flex min-w-0 max-w-full flex-wrap items-center gap-2">
         {classNames.map((className) => (
           <AssignmentClassBadge key={className} className={className} />
         ))}
@@ -120,7 +124,7 @@ function AssignmentLot({
           {assignment.item_count === 1 ? 'issue' : 'issues'}
         </span>
         {assignment.due_at ? (
-          <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
+          <span className="flex min-w-0 max-w-full items-center gap-1.5 text-xs text-muted-foreground">
             <CalendarClock className="size-3.5" />
             Due {formatDate(assignment.due_at)}
           </span>
@@ -135,18 +139,36 @@ function AssignmentLot({
 export function TicketAssignmentsCard({
   ticketId,
   initialAssignments,
+  selectedAssignmentId,
+  onAssignmentChange,
 }: TicketAssignmentsCardProps) {
   const assignmentsQuery = useTicketAssignmentsQuery(
     ticketId,
     initialAssignments,
   );
   const assignments = assignmentsQuery.data?.items ?? [];
+  const selectedAssignment =
+    assignments.find((assignment) => assignment.id === selectedAssignmentId) ??
+    assignments[0];
+  const activeAssignmentId = selectedAssignment
+    ? String(selectedAssignment.id)
+    : '';
+  const resolvedAssignmentId = selectedAssignment?.id;
+
+  useEffect(() => {
+    if (
+      resolvedAssignmentId !== undefined &&
+      resolvedAssignmentId !== selectedAssignmentId
+    ) {
+      onAssignmentChange(resolvedAssignmentId);
+    }
+  }, [onAssignmentChange, resolvedAssignmentId, selectedAssignmentId]);
 
   return (
-    <Card>
-      <CardHeader>
+    <Card className="min-w-0 max-w-full">
+      <CardHeader className="min-w-0 px-3 sm:px-6">
         <div className="flex items-start justify-between gap-3">
-          <div>
+          <div className="min-w-0">
             <CardTitle className="flex items-center gap-2">
               <BriefcaseBusiness className="size-5 text-primary" />
               Assignment lots
@@ -160,7 +182,7 @@ export function TicketAssignmentsCard({
           ) : null}
         </div>
       </CardHeader>
-      <CardContent className="space-y-3">
+      <CardContent className="min-w-0 space-y-3 overflow-hidden px-3 sm:px-6">
         {assignmentsQuery.isLoading ? (
           Array.from({ length: 2 }).map((_, index) => (
             <div
@@ -183,10 +205,54 @@ export function TicketAssignmentsCard({
               Try again
             </Button>
           </div>
-        ) : assignments.length ? (
-          assignments.map((assignment) => (
-            <AssignmentLot key={assignment.id} assignment={assignment} />
-          ))
+        ) : selectedAssignment ? (
+          <div className="min-w-0 space-y-3">
+            <nav
+              aria-label="Assignment lots"
+              className="w-full max-w-full overflow-x-auto overflow-y-hidden overscroll-x-contain touch-pan-x"
+            >
+              <div
+                role="tablist"
+                aria-orientation="horizontal"
+                className="flex w-max min-w-full border-b"
+              >
+                {assignments.map((assignment) => {
+                  const assignmentId = String(assignment.id);
+                  const isActive = assignmentId === activeAssignmentId;
+
+                  return (
+                    <button
+                      key={assignment.id}
+                      id={`assignment-tab-${assignmentId}`}
+                      type="button"
+                      role="tab"
+                      aria-selected={isActive}
+                      aria-controls={`assignment-panel-${assignmentId}`}
+                      tabIndex={isActive ? 0 : -1}
+                      className={cn(
+                        'relative shrink-0 px-3 py-2.5 text-sm font-medium whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset',
+                        isActive
+                          ? 'text-foreground after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-foreground'
+                          : 'text-muted-foreground hover:text-foreground',
+                      )}
+                      onClick={() => onAssignmentChange(assignment.id)}
+                    >
+                      Lot {assignment.id}
+                    </button>
+                  );
+                })}
+              </div>
+            </nav>
+
+            <div
+              id={`assignment-panel-${activeAssignmentId}`}
+              role="tabpanel"
+              aria-labelledby={`assignment-tab-${activeAssignmentId}`}
+              className="min-w-0"
+            >
+              <AssignmentLot assignment={selectedAssignment} />
+            </div>
+          </div>
         ) : (
           <div className="rounded-lg border border-dashed px-4 py-8 text-center">
             <p className="text-sm font-medium">No assignments yet</p>