import { Head, Link, router } from '@inertiajs/react'; import { ArrowLeft, Pencil, Trash2 } from 'lucide-react'; import TicketController from '@/actions/App/Http/Controllers/Admin/TicketController'; import { ConfirmDialog } from '@/components/confirm-dialog'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from '@/components/ui/card'; import { useCan } from '@/hooks/use-can'; import { formatDate } from '@/lib/utils'; import { dashboard } from '@/routes'; import { show as projectShow } from '@/routes/admin/projects'; import { index } from '@/routes/admin/tickets'; import { TicketCategoryBadge } from './category-badge'; import { TicketPriorityBadge } from './priority-badge'; import { TicketStatusBadge } from './status-badge'; type TicketDetail = { id: number; code: string; title: string; description: string | null; category: string; category_label: string; status: string; status_label: string; priority: string; priority_label: string; is_active: boolean; due_date: string | null; created_at: string | null; project: { id: number; code: string; name: string }; assignee: { id: number; name: string } | null; creator: { id: number; name: string } | null; tasks: { id: number; code: string; title: string; status: string; status_label: string; }[]; }; export default function TicketsShow({ ticket }: { ticket: TicketDetail }) { const canUpdate = useCan('tickets.update'); const canDelete = useCan('tickets.delete'); return ( <>

{ticket.title}

{!ticket.is_active && ( Inactif )}

{ticket.code}

{canDelete && ( Supprimer } title={`Supprimer le ticket ${ticket.title} ?`} description="Cette action est irréversible." confirmLabel="Supprimer" onConfirm={() => { router.delete( TicketController.destroy.url( ticket.id, ), ); }} /> )}
Informations

Projet

{ticket.project.code} —{' '} {ticket.project.name}

Assigné à

{ticket.assignee?.name ?? '—'}

Créé par

{ticket.creator?.name ?? '—'}

Échéance

{ticket.due_date ? formatDate(ticket.due_date) : '—'}

{ticket.description && (

Description

{ticket.description}

)} Tâches liées {ticket.tasks.length === 0 ? 'Aucune tâche liée' : `${ticket.tasks.length} tâche${ticket.tasks.length > 1 ? 's' : ''}`} {ticket.tasks.length === 0 ? (

—

) : (
    {ticket.tasks.map((task) => (
  • {task.code} {' '} {task.title} {task.status_label}
    • ))}
)}
); } TicketsShow.layout = { breadcrumbs: [ { title: 'Tableau de bord', href: dashboard() }, { title: 'Tickets', href: index() }, { title: 'Détail', href: '#' }, ], };