84 lines
2.4 KiB
TypeScript
84 lines
2.4 KiB
TypeScript
'use client';
|
|
|
|
import { useParams, useRouter } from 'next/navigation';
|
|
import { ArrowLeft, Loader2, Ticket } from 'lucide-react';
|
|
|
|
import { PageHeader } from '@/components/page-header';
|
|
import { Button } from '@/components/ui/button';
|
|
|
|
import { TicketHistoryCard } from './components/TicketHistoryCard';
|
|
import { TicketOverviewCard } from './components/TicketOverviewCard';
|
|
import { TicketRepairReportCard } from './components/TicketRepairReportCard';
|
|
import { TicketStatusActions } from './components/TicketStatusActions';
|
|
import { useTicketDetailEvents } from '../hooks/useTicketDetailEvents';
|
|
import { useTicketDetailQuery } from '../hooks/useTicketQueries';
|
|
|
|
export default function TicketDetailPage() {
|
|
const router = useRouter();
|
|
const { ticketId } = useParams() as { ticketId: string };
|
|
|
|
const ticketQuery = useTicketDetailQuery(ticketId);
|
|
const ticket = ticketQuery.data;
|
|
|
|
const liveState = useTicketDetailEvents(
|
|
ticketId,
|
|
Boolean(ticketId && ticket && ticket.status !== 'closed'),
|
|
);
|
|
|
|
if (ticketQuery.isLoading) {
|
|
return (
|
|
<div className="flex min-h-[60vh] items-center justify-center">
|
|
<Loader2 className="size-8 animate-spin text-primary" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (ticketQuery.isError || !ticket) {
|
|
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">
|
|
<PageHeader
|
|
title="Ticket Detail"
|
|
description={`Ticket ID: ${ticket.id}`}
|
|
icon={Ticket}
|
|
actions={
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => router.push('/ticket')}
|
|
>
|
|
<ArrowLeft />
|
|
Back
|
|
</Button>
|
|
}
|
|
/>
|
|
|
|
<div className="grid gap-5 xl:grid-cols-[minmax(0,1fr)_480px]">
|
|
<div className="space-y-5">
|
|
<TicketOverviewCard ticket={ticket} />
|
|
<TicketRepairReportCard ticket={ticket} />
|
|
<TicketHistoryCard ticket={ticket} />
|
|
</div>
|
|
|
|
<div>
|
|
<TicketStatusActions ticket={ticket} liveState={liveState} />
|
|
</div>
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|