import { Form, Head, Link, router } from '@inertiajs/react'; import { AlertTriangle, CalendarClock, Camera, CheckCircle2, Clock, History, LifeBuoy, MessageSquare, Pencil, Phone, Timer, Trash2, Users, } from 'lucide-react'; import { useState } from 'react'; import TicketAttachmentController from '@/actions/App/Http/Controllers/TicketAttachmentController'; import TicketStatusController from '@/actions/App/Http/Controllers/TicketStatusController'; import { AttachmentPicker } from '@/components/crm/attachment-picker'; import { FormActions } from '@/components/crm/form-field'; import { FormField, NativeSelect } from '@/components/crm/native-select'; import { RichText } from '@/components/crm/rich-text'; import { Callout, EmptyState, KeyValueGrid, PageHeader, SectionCard, } from '@/components/crm/page-header'; import { StatStrip } from '@/components/crm/kpi-tile'; import { PriorityBadge, RuleFlag, StatusPill, } from '@/components/crm/status-badge'; import { TicketActivity } from '@/components/crm/ticket-activity'; import { TicketAttachmentGallery } from '@/components/crm/ticket-attachment-gallery'; import { TicketOutcome } from '@/components/crm/ticket-outcome'; import { TicketStatusOptions } from '@/components/crm/ticket-status-options'; import { toneClasses } from '@/components/crm/tone'; import { Button } from '@/components/ui/button'; import { formatDateTime, formatDuration, formatRelative } from '@/lib/format'; import { cn } from '@/lib/utils'; import { show as customerShow } from '@/routes/customers'; import { show as jobShow } from '@/routes/jobs'; import { destroy as ticketDestroy, edit as ticketEdit, index as ticketsIndex, show as ticketShow, } from '@/routes/tickets'; import type { TicketShowProps } from '@/types'; const textareaClassName = 'border-input dark:bg-input/30 flex min-h-[84px] w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50'; export default function TicketShow({ ticket, activity, resolutionCodes, related, history, options, discussion, can, }: TicketShowProps) { // A ticket that has been open past its threshold is the thing the support // desk is judged on, so it outranks its own status colour. const isProblem = ticket.is_overdue && ticket.status.is_open; const handleDelete = () => { if ( window.confirm( `Delete ticket ${ticket.display_number}? The customer and job records are not touched.`, ) ) { router.delete(ticketDestroy({ ticket: ticket.id }).url, { preserveScroll: true, }); } }; return ( <>
{ticket.display_number} {ticket.source.label} {ticket.ticket_import_id ? ( {ticket.ticket_import_id} ) : null} · Reported {formatRelative(ticket.reported_at)} } title={ticket.issue} /** description={ // Words only: the header is one line, so the markup comes // off rather than showing as tags. ticket.body_text || `Logged from the ${ticket.source.label} system.` }*/ actions={ <> {ticket.category ? ( {ticket.category.label} ) : null} {ticket.status.label} {can.update ? ( ) : null} {can.delete ? ( ) : null} } /> {isProblem ? ( This ticket has gone past the threshold for its priority. It is waiting on{' '} {ticket.status.waiting_on.toLowerCase()}. ) : null}
{/* Sanitized on the way in and again on the way out, so the description can be formatted without the page ever trusting the markup it renders. */} {ticket.body_html ? ( ) : (

{ticket.issue}

)}
{ticket.category.label} {ticket.category.description} ) : ( Not categorised yet ), }, { label: 'Customer', value: ticket.client ? ( <> {ticket.client.name} { ticket.client .customer_number } {ticket.client.phone ? ` · ${ticket.client.phone}` : ''} {ticket.client.email ? ` · ${ticket.client.email}` : ''} ) : ( Not matched to a customer yet ), }, { label: 'Address', value: ticket.address ? ( <> {ticket.address.line} {ticket.address.is_site ? 'Installation site' : 'Billing address — no job site is linked'} ) : ( No address recorded ), }, { label: 'Job', value: ticket.job ? ( <> {ticket.job.job_number} {ticket.job.title ? ( {ticket.job.title} ) : null} { ticket.job .status_label } ) : ( No job linked ), }, { label: 'Installer', value: ticket.installer ? ( <> {ticket.installer.name} {ticket.job ? null : ( Assigned by hand — no job is linked to this ticket. )} ) : ( Unassigned ), }, { label: 'Assigned to', value: ticket.assignees.length > 0 ? ( <> {/* However many people are holding it, all of them are named. */} {ticket.assignees.map( (member) => ( { member.name } ), )} {ticket.assignees .length === 1 ? 'Holding this ticket in the office. The installer answers for the work itself.' : `${ticket.assignees.length} people are holding this ticket. The installer answers for the work itself.`} ) : ( Nobody in the office yet ), }, { label: 'Picked up', value: ticket.dates.acknowledged_at ? ( formatDateTime( ticket.dates.acknowledged_at, ) ) : ( Not yet picked up ), }, ]} /> {ticket.contact.phone} ) : null, }, { label: 'Email', value: ticket.contact.email ? ( {ticket.contact.email} ) : null, }, { label: 'SMS message id', value: ticket.ticket_import_id ? ( {ticket.ticket_import_id} ) : ( Logged by staff, not imported ), }, ]} /> {ticket.creator ? (

Logged by {ticket.creator.name}

) : null} {history.length === 0 ? ( ) : (
    {history.map((entry) => (

  1. {entry.label}

    {formatDateTime(entry.at)}

    {entry.detail ? ( ) : null}
    2. ))}
)}
{related.length === 0 ? (
) : (
    {related.map((other) => (
  • {other.match} {other.display_number} {other.issue}
    {other.status.label} {formatDuration( other.days_open, )}
    • ))}
)}
); } /** * The files on the ticket itself: a screenshot of the inverter's display, a * photo of the roof, the manufacturer's claim form. * * They are part of the ticket rather than the conversation because they are the * evidence, not something somebody said. Uploading is offered to anyone who can * work the ticket, and the files are served through the ticket policy. */ function Attachments({ ticket, canUpdate, }: { ticket: TicketShowProps['ticket']; canUpdate: boolean; }) { return ( {ticket.attachments.length === 0 ? ( ) : ( )} {canUpdate ? (
{({ processing, errors }) => ( <> )}
) : null} ); } /** * Moving the ticket on. * * Two things are written here and they are deliberately apart. The note says * why it moved and what happens next, and it lands in the activity feed where * the next person will read it. The outcome only appears when the move finishes * the ticket, because that is the part the business keeps afterwards: what was * done, what kind of fix it was, and who signed it off. */ function StatusPanel({ ticket, options, resolutionCodes, canUpdate, }: { ticket: TicketShowProps['ticket']; options: TicketShowProps['options']; resolutionCodes: TicketShowProps['resolutionCodes']; canUpdate: boolean; }) { const [status, setStatus] = useState(ticket.status.value); const [code, setCode] = useState( ticket.resolution_code?.value ?? '', ); const finishing = status === 'resolved' || status === 'closed'; const chosenCode = resolutionCodes.find((option) => option.value === code); const needsResolution = finishing && !ticket.resolution; const needsCode = finishing && !ticket.resolution_code; return ( {ticket.status.needs_installer ? ( This ticket is parked on the install crew. Whoever did the job is the person who can confirm or rectify it. ) : null} {ticket.status.is_warranty ? ( {ticket.status.description} Record the claim or reference number and the manufacturer's answer as an internal note, so the decision is traceable later. ) : null}

Currently waiting on{' '} {ticket.status.waiting_on} . {ticket.status.description}

{canUpdate ? (
{({ processing, errors }) => ( <> setStatus(event.target.value) } >