feat(tickets): add repair proof status filter for class issues

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

@@ -1,7 +1,13 @@
 'use client';
 
 import { useEffect, useMemo, useState } from 'react';
-import { AlertTriangle, ChevronLeft, ChevronRight, Trash2 } from 'lucide-react';
+import {
+  AlertTriangle,
+  ChevronLeft,
+  ChevronRight,
+  ImageIcon,
+  Trash2,
+} from 'lucide-react';
 
 import DetectionLocationMap from '@/components/map/detectionLocationMap';
 import { Badge } from '@/components/ui/badge';
@@ -10,12 +16,15 @@ import { Skeleton } from '@/components/ui/skeleton';
 import AnnotatedDetectionImage from '@/components/video/annotatedDetectionImage';
 import { getDefectVisual } from '@/constants/defectVisualConfig';
 import { cn } from '@/lib/utils';
+import type { DetectionRepairProof } from '@/types';
 
 import {
   useDiscardDetectionMutation,
   useTicketClassDetectionsQuery,
 } from '../../hooks/useTicketQueries';
 import { DetectionDiscardDialog } from './DetectionDiscardDialog';
+import { RepairProofGallery } from './repair/RepairProofGallery';
+import { RepairSubmittedBanner } from './repair/RepairSubmittedBanner';
 
 interface TicketClassDetectionPreviewProps {
   ticketId: string;
@@ -54,6 +63,44 @@ function DetectionMetadataBar({
   );
 }
 
+function DetectionRepairProofPanel({
+  repairProof,
+}: {
+  repairProof: DetectionRepairProof;
+}) {
+  if (!repairProof.submitted) {
+    return null;
+  }
+
+  return (
+    <section className="space-y-4 rounded-lg border bg-muted/20 p-4">
+      <div className="flex items-center gap-2">
+        <ImageIcon className="size-5 text-primary" />
+        <h4 className="font-semibold">Repair Proof</h4>
+      </div>
+
+      {repairProof.submitted_at ? (
+        <RepairSubmittedBanner
+          submittedAt={repairProof.submitted_at}
+          submitterName="Ticket Worker"
+        />
+      ) : null}
+
+      <RepairProofGallery
+        imageUrls={repairProof.proof_image_urls}
+        maxVisibleImages={4}
+      />
+
+      <div className="space-y-1.5">
+        <p className="text-xs font-semibold text-foreground">Repair Notes</p>
+        <p className="text-sm leading-relaxed whitespace-pre-wrap text-muted-foreground">
+          {repairProof.notes?.trim() || 'No repair notes provided.'}
+        </p>
+      </div>
+    </section>
+  );
+}
+
 function TicketClassDetectionPreviewSkeleton() {
   return (
     <>
@@ -131,12 +178,6 @@ export function TicketClassDetectionPreview({
   const detectionResult = detectionsQuery.data;
   const activeDetection = detectionResult?.items[0];
   const detectionCount = detectionResult?.total ?? totalCount ?? 0;
-  const mediaAspectRatio =
-    detectionResult &&
-    detectionResult.video_width > 0 &&
-    detectionResult.video_height > 0
-      ? `${detectionResult.video_width} / ${detectionResult.video_height}`
-      : '16 / 9';
 
   useEffect(() => {
     if (detectionCount === 0 && currentIndex !== 0) {
@@ -249,11 +290,13 @@ export function TicketClassDetectionPreview({
           <div className="grid grid-cols-1 items-start gap-4 xl:grid-cols-2">
             <div className="min-w-0 space-y-2">
               <p className="text-muted-foreground">Detection Image</p>
-              <div className="overflow-hidden rounded-lg">
+              <div className="w-full overflow-hidden rounded-lg">
                 <AnnotatedDetectionImage
                   detection={activeDetection}
                   videoWidth={detectionResult.video_width}
                   videoHeight={detectionResult.video_height}
+                  aspectRatio="16 / 9"
+                  enableLightbox
                 />
               </div>
             </div>
@@ -265,7 +308,7 @@ export function TicketClassDetectionPreview({
               label={`${displayName} - Frame ${activeDetection.frame.number}`}
               title="Location on Map"
               variant="plain"
-              aspectRatio={mediaAspectRatio}
+              aspectRatio="16 / 9"
               showCoordinates={false}
             />
           </div>
@@ -287,6 +330,12 @@ export function TicketClassDetectionPreview({
             ]}
           />
 
+          {activeDetection.repair_proof ? (
+            <DetectionRepairProofPanel
+              repairProof={activeDetection.repair_proof}
+            />
+          ) : null}
+
           <div className="flex justify-end">
             <Button
               type="button"

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

@@ -10,7 +10,6 @@ import { ClosedTicketAction } from './actions/ClosedTicketAction';
 import { NoTicketAction } from './actions/NoTicketAction';
 import { ReviewExtensionRequestAction } from './actions/ReviewExtensionRequestAction';
 import { ReviewRepairAction } from './actions/ReviewRepairAction';
-import { SubmittedRepairProofAction } from './actions/SubmittedRepairProofAction';
 import { SubmitRepairAction } from './actions/SubmitRepairAction';
 
 interface TicketStatusActionsProps {
@@ -72,15 +71,5 @@ function getTicketAction(ticket: TicketDetail) {
 }
 
 export function TicketStatusActions({ ticket }: TicketStatusActionsProps) {
-  const action = getTicketAction(ticket);
-  const submittedProof = ticket.repair?.submitted_at ? (
-    <SubmittedRepairProofAction ticket={ticket} />
-  ) : null;
-
-  return (
-    <div className="space-y-3">
-      {submittedProof}
-      {action}
-    </div>
-  );
+  return <div className="space-y-3">{getTicketAction(ticket)}</div>;
 }

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

@@ -1 +0,0 @@
-export { RepairProofSummary as SubmittedRepairProofAction } from '../repair/RepairProofSummary';

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

@@ -11,11 +11,15 @@ import { protectedMediaService } from '@/services/api';
 
 interface RepairProofGalleryProps {
   imageUrls: string[];
+  maxVisibleImages?: number;
 }
 
 const MAX_VISIBLE_IMAGES = 8;
 
-export function RepairProofGallery({ imageUrls }: RepairProofGalleryProps) {
+export function RepairProofGallery({
+  imageUrls,
+  maxVisibleImages = MAX_VISIBLE_IMAGES,
+}: RepairProofGalleryProps) {
   const queries = useQueries({
     queries: imageUrls.map((url) => ({
       queryKey: ['protected-media', 'v2', url],
@@ -44,7 +48,7 @@ export function RepairProofGallery({ imageUrls }: RepairProofGalleryProps) {
   if (queries.some((query) => query.isLoading)) {
     return (
       <div className="grid grid-cols-4 gap-1 overflow-hidden rounded-lg">
-        {imageUrls.slice(0, MAX_VISIBLE_IMAGES).map((url, index) => (
+        {imageUrls.slice(0, maxVisibleImages).map((url, index) => (
           <Skeleton
             key={`${url}-${index}`}
             className="aspect-square rounded-lg"
@@ -57,7 +61,7 @@ export function RepairProofGallery({ imageUrls }: RepairProofGalleryProps) {
   const images = objectUrls.flatMap((url, index) =>
     url ? [{ url, originalIndex: index }] : [],
   );
-  const visibleCount = Math.min(MAX_VISIBLE_IMAGES, images.length);
+  const visibleCount = Math.min(maxVisibleImages, images.length);
   const overflowCount = images.length - visibleCount;
 
   if (images.length === 0) {
@@ -102,8 +106,8 @@ export function RepairProofGallery({ imageUrls }: RepairProofGalleryProps) {
               className="size-full object-cover transition duration-300 group-hover:scale-[1.03] group-hover:brightness-90"
             />
             {isOverflowTile ? (
-              <span className="absolute inset-0 flex items-center justify-center bg-black/55 text-xl font-semibold text-white transition-colors group-hover:bg-black/65">
-                +{overflowCount}
+              <span className="absolute inset-0 flex items-center justify-center bg-black/55 px-2 text-center text-sm font-semibold text-white transition-colors group-hover:bg-black/65 sm:text-base">
+                +{overflowCount} more
               </span>
             ) : null}
           </a>

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

@@ -1,103 +0,0 @@
-import { CheckCircle2, HardHat, Wrench, ToolCase } from 'lucide-react';
-
-import { ProtectedVideoPlayer } from '@/components/media/ProtectedVideoPlayer';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import type { TicketDetail } from '@/types';
-
-import { formatDate } from '@/utils/date';
-import { RepairProofGallery } from './RepairProofGallery';
-
-function SubmittedBanner({
-  submittedAt,
-  submitterName,
-}: {
-  submittedAt: string;
-  submitterName: string;
-}) {
-  return (
-    <div className="flex items-start gap-3 rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-3 dark:border-emerald-900/60 dark:bg-emerald-950/30">
-      <CheckCircle2 className="mt-0.5 size-5 shrink-0 text-emerald-600 dark:text-emerald-400" />
-      <div className="min-w-0 space-y-0.5">
-        <p className="text-sm font-semibold text-emerald-800 dark:text-emerald-200">
-          Repair Submitted
-        </p>
-        <p className="text-xs text-emerald-700/80 dark:text-emerald-300/80">
-          {formatDate(submittedAt)} by {submitterName}
-        </p>
-      </div>
-    </div>
-  );
-}
-
-function ImageGallery({
-  imageUrls,
-  hasVideo,
-}: {
-  imageUrls: string[];
-  hasVideo: boolean;
-}) {
-  if (imageUrls.length === 0) {
-    return hasVideo ? null : (
-      <div className="flex items-center gap-2 rounded-lg border border-dashed px-3 py-4 text-sm text-muted-foreground">
-        <HardHat className="size-4 shrink-0" />
-        No media attached
-      </div>
-    );
-  }
-
-  return <RepairProofGallery imageUrls={imageUrls} />;
-}
-
-function Notes({ notes }: { notes: string | null | undefined }) {
-  return (
-    <div className="space-y-1.5">
-      <p className="text-xs font-semibold text-foreground">Repair Notes</p>
-      <p className="text-sm leading-relaxed text-muted-foreground">
-        {notes?.trim() || 'No repair notes provided.'}
-      </p>
-    </div>
-  );
-}
-
-export function RepairProofSummary({ ticket }: { ticket: TicketDetail }) {
-  const repair = ticket.repair;
-
-  if (!repair?.submitted_at) {
-    return null;
-  }
-
-  const submitterName = ticket.worker?.name?.trim() || 'Assigned worker';
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle className="flex items-center gap-2 text-base">
-          <ToolCase className="text-primary" />
-          Repair Proof
-        </CardTitle>
-      </CardHeader>
-
-      <CardContent className="space-y-4">
-        <SubmittedBanner
-          submittedAt={repair.submitted_at}
-          submitterName={submitterName}
-        />
-
-        <ProtectedVideoPlayer
-          url={repair.proof_video_url}
-          meta="Contractor evidence video"
-          emptyTitle="No repair video uploaded"
-          emptyDescription="The assigned worker has not uploaded a repair video."
-          className="rounded-lg"
-        />
-
-        <ImageGallery
-          imageUrls={repair.proof_image_urls}
-          hasVideo={Boolean(repair.proof_video_url)}
-        />
-
-        <Notes notes={repair.notes} />
-      </CardContent>
-    </Card>
-  );
-}

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

@@ -0,0 +1,27 @@
+import { CheckCircle2 } from 'lucide-react';
+
+import { formatDate } from '@/utils/date';
+
+interface RepairSubmittedBannerProps {
+  submittedAt: string;
+  submitterName: string;
+}
+
+export function RepairSubmittedBanner({
+  submittedAt,
+  submitterName,
+}: RepairSubmittedBannerProps) {
+  return (
+    <div className="flex items-start gap-3 rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-3 dark:border-emerald-900/60 dark:bg-emerald-950/30">
+      <CheckCircle2 className="mt-0.5 size-5 shrink-0 text-emerald-600 dark:text-emerald-400" />
+      <div className="min-w-0 space-y-0.5">
+        <p className="text-sm font-semibold text-emerald-800 dark:text-emerald-200">
+          Repair Submitted
+        </p>
+        <p className="text-xs text-emerald-700/80 dark:text-emerald-300/80">
+          {formatDate(submittedAt)} by {submitterName}
+        </p>
+      </div>
+    </div>
+  );
+}