96 lines
3.1 KiB
TypeScript
96 lines
3.1 KiB
TypeScript
'use client';
|
|
|
|
import { useParams, useRouter, useSearchParams } from 'next/navigation';
|
|
import { ArrowLeft } from 'lucide-react';
|
|
|
|
import { Button } from '@/components/ui/button';
|
|
|
|
import { TicketDetailHeader } from './components/TicketDetailHeader';
|
|
import {
|
|
TicketOverviewCardSkeleton,
|
|
TicketOverviewHeaderSkeleton,
|
|
} from './components/TicketOverviewSkeleton';
|
|
import {
|
|
TicketClassActionsSkeleton,
|
|
TicketClassContentSkeleton,
|
|
} from './components/TicketClassDetailSkeleton';
|
|
|
|
import { TicketHistoryCard } from './components/TicketHistoryCard';
|
|
import { TicketOverviewCard } from './components/TicketOverviewCard';
|
|
import { TicketRepairReportCard } from './components/TicketRepairReportCard';
|
|
import { TicketStatusActions } from './components/TicketStatusActions';
|
|
import { TicketDefectClassTabs } from './components/TicketDefectClassTabs';
|
|
import { useTicketDetailEvents } from '../hooks/useTicketDetailEvents';
|
|
import {
|
|
useTicketClassDetailQuery,
|
|
useTicketOverviewQuery,
|
|
} from '../hooks/useTicketQueries';
|
|
|
|
export default function TicketDetailPage() {
|
|
const router = useRouter();
|
|
const searchParams = useSearchParams();
|
|
const { ticketId } = useParams() as { ticketId: string };
|
|
const defectClass = searchParams.get('defect_class') ?? undefined;
|
|
|
|
const overviewQuery = useTicketOverviewQuery(ticketId);
|
|
const classDetailQuery = useTicketClassDetailQuery(ticketId, defectClass);
|
|
const overview = overviewQuery.data;
|
|
const classDetail = classDetailQuery.data;
|
|
const isClassDetailLoading = Boolean(
|
|
defectClass && classDetailQuery.isLoading,
|
|
);
|
|
|
|
useTicketDetailEvents(ticketId, defectClass, Boolean(ticketId));
|
|
|
|
if (overviewQuery.isError) {
|
|
return (
|
|
<div className="flex min-h-[60vh] flex-col items-center justify-center gap-3">
|
|
<p className="text-sm text-destructive">Failed to load ticket.</p>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => router.push('/ticket')}
|
|
>
|
|
<ArrowLeft />
|
|
Back to Tickets
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<main className="relative z-10 space-y-5">
|
|
{overview ? (
|
|
<TicketDetailHeader ticket={overview} />
|
|
) : (
|
|
<TicketOverviewHeaderSkeleton />
|
|
)}
|
|
|
|
<div className="grid gap-5 xl:grid-cols-[minmax(0,7fr)_minmax(0,3fr)]">
|
|
<div className="space-y-5">
|
|
{overview ? (
|
|
<TicketOverviewCard ticket={overview} defectClass={defectClass} />
|
|
) : (
|
|
<TicketOverviewCardSkeleton />
|
|
)}
|
|
{isClassDetailLoading ? <TicketClassContentSkeleton /> : null}
|
|
{!isClassDetailLoading && classDetail ? (
|
|
<>
|
|
<TicketRepairReportCard ticket={classDetail} />
|
|
<TicketHistoryCard ticket={classDetail} />
|
|
</>
|
|
) : null}
|
|
</div>
|
|
|
|
<div className="space-y-3 self-start">
|
|
<TicketDefectClassTabs ticketId={ticketId} />
|
|
{isClassDetailLoading ? <TicketClassActionsSkeleton /> : null}
|
|
{!isClassDetailLoading && classDetail ? (
|
|
<TicketStatusActions ticket={classDetail} />
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|