refactor(ticket): make repair review ticket-level
This commit is contained in:
@@ -0,0 +1,180 @@
|
||||
import { CalendarCheck2, ImageIcon, MapPin, Smartphone } from 'lucide-react';
|
||||
|
||||
import DetectionLocationMap from '@/components/map/detectionLocationMap';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import AnnotatedDetectionImage from '@/components/video/annotatedDetectionImage';
|
||||
import { cn } from '@/lib/utils';
|
||||
import type { DetectionResultItem } from '@/types';
|
||||
import { formatDate } from '@/utils/date';
|
||||
|
||||
import { RepairProofGallery } from '../../components/repair/RepairProofGallery';
|
||||
import { formatVideoTimestamp, type IssueReviewStatus } from './reviewTypes';
|
||||
|
||||
const REVIEW_STATUS_LABEL: Record<IssueReviewStatus, string> = {
|
||||
not_submitted: 'Awaiting Repair',
|
||||
pending: 'Under Review',
|
||||
approved: 'Approved',
|
||||
rejected: 'Rejected',
|
||||
};
|
||||
|
||||
const REVIEW_STATUS_CLASS: Record<IssueReviewStatus, string> = {
|
||||
not_submitted: 'bg-zinc-500/10 text-zinc-600 dark:text-zinc-300',
|
||||
pending: 'bg-violet-500/10 text-violet-600 dark:text-violet-400',
|
||||
approved: 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400',
|
||||
rejected: 'bg-destructive/10 text-destructive',
|
||||
};
|
||||
|
||||
function MetadataItem({
|
||||
label,
|
||||
value,
|
||||
}: {
|
||||
label: string;
|
||||
value: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div className="min-w-0 space-y-1 px-4 first:pl-0 last:pr-0">
|
||||
<p className="text-xs text-muted-foreground">{label}</p>
|
||||
<div className="truncate text-sm font-semibold text-foreground">
|
||||
{value}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface IssueEvidencePanelProps {
|
||||
detection: DetectionResultItem;
|
||||
issueNumber: number;
|
||||
videoWidth: number;
|
||||
videoHeight: number;
|
||||
reviewStatus: IssueReviewStatus;
|
||||
}
|
||||
|
||||
export function IssueEvidencePanel({
|
||||
detection,
|
||||
issueNumber,
|
||||
videoWidth,
|
||||
videoHeight,
|
||||
reviewStatus,
|
||||
}: IssueEvidencePanelProps) {
|
||||
const repairProof = detection.repair_proof;
|
||||
const displayName = detection.detection.display_name;
|
||||
const confidence = Math.round(detection.detection.confidence * 100);
|
||||
|
||||
return (
|
||||
<div className="min-w-0 space-y-4">
|
||||
<Card>
|
||||
<CardHeader className="border-b">
|
||||
<div className="flex flex-wrap items-center justify-between gap-3">
|
||||
<CardTitle className="text-base">
|
||||
{displayName} #{issueNumber}
|
||||
</CardTitle>
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className={cn(REVIEW_STATUS_CLASS[reviewStatus])}
|
||||
>
|
||||
{REVIEW_STATUS_LABEL[reviewStatus]}
|
||||
</Badge>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-2 divide-x sm:grid-cols-4">
|
||||
<MetadataItem
|
||||
label="Video Timestamp"
|
||||
value={formatVideoTimestamp(detection.frame.timestamp_seconds)}
|
||||
/>
|
||||
<MetadataItem label="Frame" value={detection.frame.number} />
|
||||
<MetadataItem label="Confidence" value={`${confidence}%`} />
|
||||
<MetadataItem label="Issue ID" value={detection.detection.id} />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="grid items-start gap-4 2xl:grid-cols-2">
|
||||
<section className="min-w-0 space-y-2">
|
||||
<p className="flex items-center gap-2 text-sm font-semibold">
|
||||
<ImageIcon className="size-4 text-primary" />
|
||||
Detection Image (Before)
|
||||
</p>
|
||||
<AnnotatedDetectionImage
|
||||
detection={detection}
|
||||
videoWidth={videoWidth}
|
||||
videoHeight={videoHeight}
|
||||
aspectRatio="16 / 9"
|
||||
enableLightbox
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section className="min-w-0 space-y-2">
|
||||
<p className="flex items-center gap-2 text-sm font-semibold">
|
||||
<MapPin className="size-4 text-primary" />
|
||||
Detection Location
|
||||
</p>
|
||||
<DetectionLocationMap
|
||||
latitude={detection.location.latitude}
|
||||
longitude={detection.location.longitude}
|
||||
label={`${displayName} #${issueNumber} - Frame ${detection.frame.number}`}
|
||||
title=""
|
||||
variant="plain"
|
||||
aspectRatio="16 / 9"
|
||||
showCoordinates={false}
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section className="space-y-4">
|
||||
<div className="flex flex-wrap items-center justify-between gap-3">
|
||||
<p className="flex items-center gap-2 text-sm font-semibold">
|
||||
<CalendarCheck2 className="size-4 text-primary" />
|
||||
Repair Proof (After Repair)
|
||||
</p>
|
||||
{repairProof?.submitted ? (
|
||||
<Badge className="bg-emerald-500/10 text-emerald-600 dark:text-emerald-400">
|
||||
<Smartphone />
|
||||
Uploaded from App
|
||||
</Badge>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="space-y-5">
|
||||
{!repairProof?.submitted ? (
|
||||
<div className="rounded-lg border border-dashed bg-muted/20 px-4 py-10 text-center">
|
||||
<p className="text-sm font-medium">
|
||||
Repair proof is not submitted yet.
|
||||
</p>
|
||||
<p className="mt-1 text-xs text-muted-foreground">
|
||||
This issue cannot be reviewed until repair evidence is
|
||||
available.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{repairProof.submitted_at ? (
|
||||
<div className="rounded-lg border border-emerald-500/20 bg-emerald-500/5 px-4 py-3">
|
||||
<p className="text-sm font-semibold text-emerald-700 dark:text-emerald-300">
|
||||
Uploaded from the field app on{' '}
|
||||
{formatDate(repairProof.submitted_at)}
|
||||
</p>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<RepairProofGallery
|
||||
imageUrls={repairProof.proof_image_urls}
|
||||
maxVisibleImages={4}
|
||||
/>
|
||||
|
||||
<div className="space-y-1.5 rounded-lg border bg-card p-4 shadow-xs">
|
||||
<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 were provided.'}
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,216 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import {
|
||||
Check,
|
||||
CheckCircle2,
|
||||
ClipboardCheck,
|
||||
Info,
|
||||
Loader2,
|
||||
X,
|
||||
XCircle,
|
||||
} from 'lucide-react';
|
||||
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { cn } from '@/lib/utils';
|
||||
import type {
|
||||
DetectionResultItem,
|
||||
ReviewDetectionRepairProofPayload,
|
||||
} from '@/types';
|
||||
import { formatDate } from '@/utils/date';
|
||||
|
||||
import type { IssueReviewStatus } from './reviewTypes';
|
||||
|
||||
type ReviewDecision = ReviewDetectionRepairProofPayload['action'];
|
||||
|
||||
interface IssueReviewActionProps {
|
||||
detection: DetectionResultItem;
|
||||
issueLabel: string;
|
||||
status: IssueReviewStatus;
|
||||
isPending: boolean;
|
||||
onSave: (payload: ReviewDetectionRepairProofPayload) => Promise<void>;
|
||||
}
|
||||
|
||||
export function IssueReviewAction({
|
||||
detection,
|
||||
issueLabel,
|
||||
status,
|
||||
isPending,
|
||||
onSave,
|
||||
}: IssueReviewActionProps) {
|
||||
const [comment, setComment] = useState('');
|
||||
const [decision, setDecision] = useState<ReviewDecision>();
|
||||
|
||||
useEffect(() => {
|
||||
setComment('');
|
||||
setDecision(undefined);
|
||||
}, [detection.detection.id]);
|
||||
|
||||
if (status === 'not_submitted') {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="border-b">
|
||||
<CardTitle className="flex items-center gap-2 text-base">
|
||||
<ClipboardCheck className="size-5 text-primary" />
|
||||
Review & Action
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="rounded-lg border border-dashed bg-muted/30 px-4 py-8 text-center">
|
||||
<Info className="mx-auto size-6 text-muted-foreground" />
|
||||
<p className="mt-3 text-sm font-medium">Repair proof required</p>
|
||||
<p className="mt-1 text-xs text-muted-foreground">
|
||||
{issueLabel} is not ready for review.
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
if (status === 'approved' || status === 'rejected') {
|
||||
const isApproved = status === 'approved';
|
||||
const repairProof = detection.repair_proof;
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="border-b">
|
||||
<CardTitle className="flex items-center gap-2 text-base">
|
||||
<ClipboardCheck className="size-5 text-primary" />
|
||||
Review Result
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div
|
||||
className={cn(
|
||||
'rounded-lg border px-4 py-5 text-center',
|
||||
isApproved
|
||||
? 'border-emerald-500/20 bg-emerald-500/5'
|
||||
: 'border-destructive/20 bg-destructive/5',
|
||||
)}
|
||||
>
|
||||
{isApproved ? (
|
||||
<CheckCircle2 className="mx-auto size-8 text-emerald-600" />
|
||||
) : (
|
||||
<XCircle className="mx-auto size-8 text-destructive" />
|
||||
)}
|
||||
<Badge
|
||||
className={cn(
|
||||
'mt-3',
|
||||
isApproved
|
||||
? 'bg-emerald-500/10 text-emerald-600'
|
||||
: 'bg-destructive/10 text-destructive',
|
||||
)}
|
||||
>
|
||||
{isApproved ? 'Approved' : 'Rejected'}
|
||||
</Badge>
|
||||
{repairProof?.reviewed_by_name || repairProof?.reviewed_at ? (
|
||||
<p className="mt-2 text-xs text-muted-foreground">
|
||||
{repairProof.reviewed_by_name
|
||||
? `By ${repairProof.reviewed_by_name}`
|
||||
: 'Reviewed'}
|
||||
{repairProof.reviewed_at
|
||||
? ` on ${formatDate(repairProof.reviewed_at)}`
|
||||
: ''}
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{repairProof?.review_comment ? (
|
||||
<div className="space-y-1.5 rounded-lg bg-muted/30 p-3">
|
||||
<p className="text-xs font-semibold">Review Comment</p>
|
||||
<p className="text-sm whitespace-pre-wrap text-muted-foreground">
|
||||
{repairProof.review_comment}
|
||||
</p>
|
||||
</div>
|
||||
) : null}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
const submitDecision = async (nextDecision: ReviewDecision) => {
|
||||
setDecision(nextDecision);
|
||||
|
||||
try {
|
||||
await onSave({
|
||||
action: nextDecision,
|
||||
comment: comment.trim() || undefined,
|
||||
});
|
||||
} catch {
|
||||
// The mutation owns user-facing error feedback.
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="border-b">
|
||||
<CardTitle className="flex items-center gap-2 text-base">
|
||||
<ClipboardCheck className="size-5 text-primary" />
|
||||
Review & Action
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-5">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="review-comment">Comment (Optional)</Label>
|
||||
<Textarea
|
||||
id="review-comment"
|
||||
value={comment}
|
||||
maxLength={4000}
|
||||
rows={5}
|
||||
disabled={isPending}
|
||||
onChange={(event) => setComment(event.target.value)}
|
||||
placeholder="Enter your review comments..."
|
||||
/>
|
||||
<p className="text-right text-xs text-muted-foreground">
|
||||
{comment.length} / 4000
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>Decision</Label>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
disabled={isPending}
|
||||
onClick={() => void submitDecision('approve')}
|
||||
className={cn(
|
||||
decision === 'approve' &&
|
||||
'border-emerald-500 bg-emerald-500/10 text-emerald-700 hover:bg-emerald-500/15 dark:text-emerald-300',
|
||||
)}
|
||||
>
|
||||
{isPending && decision === 'approve' ? (
|
||||
<Loader2 className="animate-spin" />
|
||||
) : (
|
||||
<Check />
|
||||
)}
|
||||
Approve
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
disabled={isPending}
|
||||
onClick={() => void submitDecision('reject')}
|
||||
className={cn(
|
||||
decision === 'reject' &&
|
||||
'border-destructive bg-destructive/10 text-destructive hover:bg-destructive/15',
|
||||
)}
|
||||
>
|
||||
{isPending && decision === 'reject' ? (
|
||||
<Loader2 className="animate-spin" />
|
||||
) : (
|
||||
<X />
|
||||
)}
|
||||
Reject
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
import { ArrowLeft, ChevronLeft, ChevronRight } from 'lucide-react';
|
||||
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
|
||||
import type { ProofStatusFilter } from './reviewTypes';
|
||||
|
||||
const PROOF_STATUS_FILTERS: Array<{
|
||||
value: ProofStatusFilter;
|
||||
label: string;
|
||||
}> = [
|
||||
{ value: 'all', label: 'All' },
|
||||
{ value: 'pending', label: 'Pending' },
|
||||
{ value: 'approved', label: 'Approved' },
|
||||
{ value: 'rejected', label: 'Rejected' },
|
||||
];
|
||||
|
||||
interface IssueReviewHeaderProps {
|
||||
ticketLabel: string;
|
||||
defectLabel: string;
|
||||
currentIndex: number;
|
||||
total: number;
|
||||
proofStatus: ProofStatusFilter;
|
||||
onBack: () => void;
|
||||
onPrevious: () => void;
|
||||
onNext: () => void;
|
||||
onProofStatusChange: (status: ProofStatusFilter) => void;
|
||||
}
|
||||
|
||||
export function IssueReviewHeader({
|
||||
ticketLabel,
|
||||
defectLabel,
|
||||
currentIndex,
|
||||
total,
|
||||
proofStatus,
|
||||
onBack,
|
||||
onPrevious,
|
||||
onNext,
|
||||
onProofStatusChange,
|
||||
}: IssueReviewHeaderProps) {
|
||||
return (
|
||||
<header className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
|
||||
<div className="flex min-w-0 items-start gap-3">
|
||||
<Button
|
||||
type="button"
|
||||
variant="secondary"
|
||||
size="icon"
|
||||
onClick={onBack}
|
||||
aria-label="Back to ticket"
|
||||
className="shrink-0"
|
||||
>
|
||||
<ArrowLeft />
|
||||
</Button>
|
||||
<div className="min-w-0 space-y-1">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<h1 className="truncate text-2xl font-semibold tracking-tight">
|
||||
{defectLabel} Review
|
||||
</h1>
|
||||
<Badge variant="secondary">{ticketLabel}</Badge>
|
||||
</div>
|
||||
<div
|
||||
className="flex max-w-full flex-nowrap items-center gap-1.5 overflow-x-auto pt-1 pb-1"
|
||||
aria-label="Filter issues by repair proof status"
|
||||
>
|
||||
{PROOF_STATUS_FILTERS.map((filter) => {
|
||||
const isActive = proofStatus === filter.value;
|
||||
|
||||
return (
|
||||
<Button
|
||||
key={filter.value}
|
||||
type="button"
|
||||
size="sm"
|
||||
variant={isActive ? 'default' : 'outline'}
|
||||
aria-pressed={isActive}
|
||||
onClick={() => onProofStatusChange(filter.value)}
|
||||
className="h-7 shrink-0 rounded-full px-3 text-xs"
|
||||
>
|
||||
{filter.label}
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 self-end lg:self-auto">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="icon"
|
||||
disabled={total === 0 || currentIndex <= 0}
|
||||
onClick={onPrevious}
|
||||
aria-label="Previous issue"
|
||||
>
|
||||
<ChevronLeft />
|
||||
</Button>
|
||||
<div className="min-w-16 text-center text-sm font-semibold">
|
||||
{total === 0 ? '0 of 0' : `${currentIndex + 1} of ${total}`}
|
||||
</div>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="icon"
|
||||
disabled={total === 0 || currentIndex >= total - 1}
|
||||
onClick={onNext}
|
||||
aria-label="Next issue"
|
||||
>
|
||||
<ChevronRight />
|
||||
</Button>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,192 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useRef } from 'react';
|
||||
import {
|
||||
CheckCircle2,
|
||||
Clock3,
|
||||
Hourglass,
|
||||
ListChecks,
|
||||
Wrench,
|
||||
XCircle,
|
||||
} from 'lucide-react';
|
||||
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { ScrollArea } from '@/components/ui/scroll-area';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipTrigger,
|
||||
} from '@/components/ui/tooltip';
|
||||
import { cn } from '@/lib/utils';
|
||||
import type { DetectionResultItem } from '@/types';
|
||||
|
||||
import {
|
||||
formatVideoTimestamp,
|
||||
getIssueId,
|
||||
getIssueReviewStatus,
|
||||
type IssueReviewStatus,
|
||||
} from './reviewTypes';
|
||||
|
||||
const STATUS_CONFIG: Record<
|
||||
IssueReviewStatus,
|
||||
{
|
||||
label: string;
|
||||
icon: typeof Hourglass;
|
||||
className: string;
|
||||
}
|
||||
> = {
|
||||
not_submitted: {
|
||||
label: 'Awaiting Repair',
|
||||
icon: Wrench,
|
||||
className: 'bg-zinc-500/10 text-zinc-600 dark:text-zinc-300',
|
||||
},
|
||||
pending: {
|
||||
label: 'Under Review',
|
||||
icon: Hourglass,
|
||||
className: 'bg-violet-500/10 text-violet-600 dark:text-violet-400',
|
||||
},
|
||||
approved: {
|
||||
label: 'Approved',
|
||||
icon: CheckCircle2,
|
||||
className: 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400',
|
||||
},
|
||||
rejected: {
|
||||
label: 'Rejected',
|
||||
icon: XCircle,
|
||||
className: 'bg-destructive/10 text-destructive',
|
||||
},
|
||||
};
|
||||
|
||||
interface IssueReviewQueueProps {
|
||||
detections: DetectionResultItem[];
|
||||
totalCount: number;
|
||||
selectedIssueId?: string;
|
||||
hasNextPage: boolean;
|
||||
isFetchingNextPage: boolean;
|
||||
onSelect: (issueId: string) => void;
|
||||
onLoadMore: () => void;
|
||||
}
|
||||
|
||||
export function IssueReviewQueue({
|
||||
detections,
|
||||
totalCount,
|
||||
selectedIssueId,
|
||||
hasNextPage,
|
||||
isFetchingNextPage,
|
||||
onSelect,
|
||||
onLoadMore,
|
||||
}: IssueReviewQueueProps) {
|
||||
const loadMoreRef = useRef<HTMLDivElement>(null);
|
||||
useEffect(() => {
|
||||
const target = loadMoreRef.current;
|
||||
if (!target || !hasNextPage || isFetchingNextPage) return;
|
||||
|
||||
const root = target.closest<HTMLElement>(
|
||||
'[data-slot="scroll-area-viewport"]',
|
||||
);
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
if (entries[0]?.isIntersecting) onLoadMore();
|
||||
},
|
||||
{ root, rootMargin: '160px 0px' },
|
||||
);
|
||||
|
||||
observer.observe(target);
|
||||
return () => observer.disconnect();
|
||||
}, [hasNextPage, isFetchingNextPage, onLoadMore]);
|
||||
|
||||
return (
|
||||
<Card className="overflow-hidden xl:h-full xl:min-h-0">
|
||||
<CardHeader className="border-b">
|
||||
<CardTitle className="flex items-center gap-2 text-base">
|
||||
<ListChecks className="size-5 text-primary" />
|
||||
Repair Issues
|
||||
<Badge variant="secondary" className="ml-auto rounded-full">
|
||||
{totalCount}
|
||||
</Badge>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="min-h-0 flex-1 p-2">
|
||||
<ScrollArea className="h-112 pr-2 xl:h-full">
|
||||
<div className="space-y-2 p-1">
|
||||
{detections.map((detection, index) => {
|
||||
const issueId = getIssueId(detection);
|
||||
const defectLabel = detection.detection.display_name;
|
||||
const status = getIssueReviewStatus(detection);
|
||||
const config = STATUS_CONFIG[status];
|
||||
const StatusIcon = config.icon;
|
||||
const isSelected = issueId === selectedIssueId;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={detection.id}
|
||||
type="button"
|
||||
onClick={() => onSelect(issueId)}
|
||||
aria-current={isSelected ? 'true' : undefined}
|
||||
className={cn(
|
||||
'w-full rounded-lg border p-3 text-left transition-colors',
|
||||
'hover:border-primary/40 hover:bg-muted/50',
|
||||
isSelected
|
||||
? 'border-primary bg-primary/6 shadow-sm'
|
||||
: 'border-border bg-card',
|
||||
)}
|
||||
>
|
||||
<div className="min-w-0 space-y-2">
|
||||
<div className="flex min-w-0 items-center justify-between gap-2">
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<p className="min-w-0 flex-1 truncate text-sm font-semibold">
|
||||
{defectLabel} #{index + 1}
|
||||
</p>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="top">
|
||||
{defectLabel} #{index + 1}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
<span className="flex shrink-0 items-center gap-1.5 text-xs text-muted-foreground">
|
||||
<Clock3 className="size-3.5" />
|
||||
{formatVideoTimestamp(
|
||||
detection.frame.timestamp_seconds,
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className={cn('shrink-0 px-1.5', config.className)}
|
||||
>
|
||||
<StatusIcon />
|
||||
{config.label}
|
||||
</Badge>
|
||||
<span aria-hidden="true">|</span>
|
||||
<span>Frame {detection.frame.number}</span>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
|
||||
<div ref={loadMoreRef} className="space-y-2 py-1">
|
||||
{isFetchingNextPage ? (
|
||||
<>
|
||||
<Skeleton className="h-20 w-full" />
|
||||
<Skeleton className="h-20 w-full" />
|
||||
</>
|
||||
) : hasNextPage ? (
|
||||
<p className="py-3 text-center text-xs text-muted-foreground">
|
||||
Scroll to load more issues
|
||||
</p>
|
||||
) : detections.length > 0 ? (
|
||||
<p className="py-3 text-center text-xs text-muted-foreground">
|
||||
All {totalCount} issues loaded
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
import { Card, CardContent, CardHeader } from '@/components/ui/card';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
|
||||
export function IssueReviewSkeleton() {
|
||||
return (
|
||||
<div className="space-y-5">
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-8 w-56" />
|
||||
<Skeleton className="h-4 w-36" />
|
||||
</div>
|
||||
<Skeleton className="h-9 w-32" />
|
||||
</div>
|
||||
<div className="grid gap-5 xl:grid-cols-[280px_minmax(0,1fr)_330px]">
|
||||
{[280, 600, 330].map((width) => (
|
||||
<Card key={width}>
|
||||
<CardHeader className="border-b">
|
||||
<Skeleton className="h-5 w-40" />
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{Array.from({ length: 4 }, (_, index) => (
|
||||
<Skeleton key={index} className="h-20 w-full" />
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
import type { DetectionProofStatus, DetectionResultItem } from '@/types';
|
||||
|
||||
export type ProofStatusFilter =
|
||||
| 'all'
|
||||
| Extract<DetectionProofStatus, 'pending' | 'approved' | 'rejected'>;
|
||||
|
||||
export type IssueReviewStatus =
|
||||
| 'not_submitted'
|
||||
| 'pending'
|
||||
| 'approved'
|
||||
| 'rejected';
|
||||
|
||||
export function getIssueId(detection: DetectionResultItem) {
|
||||
return String(detection.detection.id);
|
||||
}
|
||||
|
||||
export function getIssueReviewStatus(
|
||||
detection: DetectionResultItem,
|
||||
): IssueReviewStatus {
|
||||
const repairProof = detection.repair_proof;
|
||||
if (!repairProof?.submitted) return 'not_submitted';
|
||||
|
||||
return repairProof.review_status;
|
||||
}
|
||||
|
||||
export function formatVideoTimestamp(totalSeconds: number) {
|
||||
const seconds = Math.max(0, Math.floor(totalSeconds));
|
||||
const minutes = Math.floor(seconds / 60);
|
||||
const remainder = seconds % 60;
|
||||
|
||||
return `${minutes}:${remainder.toString().padStart(2, '0')}`;
|
||||
}
|
||||
Reference in New Issue
Block a user