58 lines
1.8 KiB
TypeScript
58 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
import { ArrowLeft } from 'lucide-react';
|
|
import { useRouter } from 'next/navigation';
|
|
|
|
import { Button } from '@/components/ui/button';
|
|
import { PERMISSIONS } from '@/constants/permissions';
|
|
import { PermissionGuard } from '@/guards';
|
|
import type { TicketOverviewDetail } from '@/types';
|
|
|
|
import { AssignTicketAction } from './actions/AssignTicketAction';
|
|
import { OpenRepairReviewAction } from './actions/OpenRepairReviewAction';
|
|
|
|
export function TicketDetailHeader({
|
|
ticket,
|
|
}: {
|
|
ticket: TicketOverviewDetail;
|
|
}) {
|
|
const router = useRouter();
|
|
const ticketLabel = ticket.ticket_name || ticket.id;
|
|
|
|
return (
|
|
<div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
|
|
<div className="flex min-w-0 items-start gap-3">
|
|
<Button
|
|
type="button"
|
|
variant="secondary"
|
|
size="icon"
|
|
onClick={() => router.push('/ticket')}
|
|
aria-label="Back to ticket list"
|
|
className="shrink-0"
|
|
>
|
|
<ArrowLeft />
|
|
</Button>
|
|
<div className="min-w-0 space-y-1">
|
|
<h1 className="text-2xl font-semibold tracking-tight">
|
|
Ticket Detail
|
|
</h1>
|
|
<p className="text-xs">Ticket: {ticketLabel}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex shrink-0 items-center gap-2">
|
|
<PermissionGuard permissions={PERMISSIONS.TICKET.REVIEW}>
|
|
<OpenRepairReviewAction
|
|
ticketId={ticket.id}
|
|
hasPendingReview={ticket.has_pending_review}
|
|
pendingReviewCount={ticket.pending_review_count}
|
|
/>
|
|
</PermissionGuard>
|
|
<PermissionGuard permissions={PERMISSIONS.TICKET.ASSIGN}>
|
|
<AssignTicketAction ticketId={ticket.id} />
|
|
</PermissionGuard>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|