refactor(ui): update branding assets and clean up repair proof UI
This commit is contained in:
@@ -1,13 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import {
|
||||
AlertTriangle,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
ImageIcon,
|
||||
Trash2,
|
||||
} from 'lucide-react';
|
||||
import { AlertTriangle, ChevronLeft, ChevronRight, Trash2 } from 'lucide-react';
|
||||
|
||||
import DetectionLocationMap from '@/components/map/detectionLocationMap';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
@@ -16,15 +10,12 @@ 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;
|
||||
@@ -63,44 +54,6 @@ 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 (
|
||||
<>
|
||||
@@ -330,12 +283,6 @@ export function TicketClassDetectionPreview({
|
||||
]}
|
||||
/>
|
||||
|
||||
{activeDetection.repair_proof ? (
|
||||
<DetectionRepairProofPanel
|
||||
repairProof={activeDetection.repair_proof}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
<div className="flex justify-end">
|
||||
<Button
|
||||
type="button"
|
||||
|
||||
@@ -1,27 +0,0 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user