import { Head, router, useForm } from '@inertiajs/react'; import { AlertTriangle, ArrowUpRight, CheckCircle2, ClipboardCheck, Clock3, LogOut, MapPin, MessageSquarePlus, Phone, RefreshCw, Search, Send, Undo2, Wrench, X, } from 'lucide-react'; import { useEffect, useState, type FormEvent } from 'react'; import { NativeSelect, FormField } from '@/components/crm/native-select'; import { EmptyState } from '@/components/crm/page-header'; import { StatusPill } from '@/components/crm/status-badge'; import { Button } from '@/components/ui/button'; import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, } from '@/components/ui/dialog'; import { Input } from '@/components/ui/input'; import { formatDateTime, formatRelative } from '@/lib/format'; import { cn } from '@/lib/utils'; import type { CompletionClaim, PublicStatusTicket, TicketStatusBoardProps, TicketStatusTone, } from '@/types'; /** The textarea styling the dialogs use, matching the shared Input. */ const textareaClassName = 'border-input dark:bg-input/30 flex min-h-[90px] 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]'; /** * The shared board itself. * * One status at a time, because the holder came to answer one question: what is * waiting on a crew. It refreshes itself quietly so a board left open on a * workshop screen stays current, and every row carries the three things that * decide who drives where — the suburb, the crew already on it, and how long it * has been sitting. */ /** * A board action waiting on the person reading: a note, a claim that the work * is finished, the review that completes it, or the review that sends it back. */ type BoardAction = { kind: 'note' | 'review' | 'complete' | 'sendBack'; ticket: PublicStatusTicket; claim: CompletionClaim | null; }; export default function TicketStatusBoard({ viewer, statuses, current, filters, tickets, totals, can, reviews, resolutionOptions, }: TicketStatusBoardProps) { const [search, setSearch] = useState(filters.search); const [refreshing, setRefreshing] = useState(false); const [action, setAction] = useState(null); useEffect(() => { setSearch(filters.search); }, [filters.search]); const visit = (params: Record) => { router.get( '/ticket-status/board', { ...filters, ...params }, { preserveState: true, preserveScroll: true, replace: true, }, ); }; // A silent poll: the board is often the second screen on a desk, and a page // that went stale an hour ago is worse than no page at all. useEffect(() => { const timer = window.setInterval(() => { // The review queue is part of what a board left open must keep // current: a claim arriving is the reason an admin is watching it. router.reload({ only: ['tickets', 'statuses', 'totals', 'reviews'], }); }, 60000); return () => window.clearInterval(timer); }, []); const refresh = () => { setRefreshing(true); router.reload({ only: ['tickets', 'statuses', 'totals', 'reviews'], onFinish: () => setRefreshing(false), }); }; const overdue = (ticket: PublicStatusTicket) => ticket.days_waiting >= 3 || ticket.priority.value === 'urgent'; return ( <>

{viewer.name} {viewer.is_staff ? viewer.role ? ` · ${viewer.role}` : ' · staff access' : ' · shared link'}

{current.label} {totals.waiting_on_installer} waiting on a crew {statuses.find( (status) => status.value === 'waiting_on_installer', ) ? ` · ${statuses.find((status) => status.value === 'waiting_on_installer')?.count ?? 0} on this queue` : ''}

{current.description}

Oldest

= 7 ? 'text-danger' : totals.oldest_days >= 3 ? 'text-warning' : 'text-foreground', )} > {totals.oldest_days === 0 ? 'Today' : `${totals.oldest_days} days`}

{statuses.map((status) => ( ))}

{ event.preventDefault(); visit({ search: search.trim() || null }); }} > setSearch(event.target.value)} placeholder="Ticket, issue, customer or suburb" className="h-9 pr-8 pl-8 text-sm" aria-label="Search this queue" /> {filters.search ? ( ) : null}

{reviews.length > 0 ? (

Waiting on completion review

A crew has said the work is done. Completing it records the outcome, so it is an Admin's call.

{reviews.length}

{row.ticket.number} {row.ticket.status.label} {row.ticket.suburb ? ( {row.ticket.suburb} ) : null} {row.ticket.installer ? ( {row.ticket.installer} ) : null}

{row.ticket.issue}

{row.claim.requested_by} {row.claim.requested_at ? ` · sent ${formatRelative(row.claim.requested_at)}` : ''} {row.waiting_days > 0 ? ` · waiting ${row.waiting_days}d` : ' · today'}

{row.claim.note}

) : null} {tickets.length === 0 ? (

) : (

{ticket.number} {ticket.priority.label} {ticket.status.label} {ticket.job_number ? ( Job {ticket.job_number} ) : null}

{ticket.issue}

{ticket.customer ? ( {ticket.customer} ) : null} {ticket.suburb ? ( {ticket.suburb} ) : null} {ticket.installer ? ( {ticket.installer} ) : ( No crew assigned )} {ticket.owner ? ( Desk: {ticket.owner} ) : null}

{ticket.days_waiting === 0 ? 'Today' : `${ticket.days_waiting}d`} {ticket.phone ? ( {ticket.phone} ) : null}

{ticket.status.waiting_on} {ticket.status_changed_at ? ` since ${formatRelative(ticket.status_changed_at)}` : ''} {ticket.reported_at ? ` · reported ${formatDateTime(ticket.reported_at)}` : ''}
{ticket.completion?.state.is_pending ? (
Sent for review by{' '} {ticket.completion.requested_by} {ticket.completion.requested_at ? ` ${formatRelative(ticket.completion.requested_at)}` : ''} {' — '}an Admin or Super Admin completes it.
) : null} {ticket.completion?.state.value === 'sent_back' ? (
Sent back {ticket.completion.reviewed_by ? ` by ${ticket.completion.reviewed_by}` : ''} :{' '} {ticket.completion.review_note ?? 'ring the office for what is still missing'}
) : null} {can.note || (can.review && !ticket.completion?.state.is_pending) || (can.complete && ticket.completion?.state.is_pending) ? (
{can.note ? ( ) : null} {can.review && !ticket.completion?.state .is_pending ? ( ) : null} {can.complete && ticket.completion?.state .is_pending ? ( <> ) : null}
) : null}

)}

Showing {totals.shown} of this queue · {can.complete ? 'You can add a note, send a ticket for review, and complete it once it has been reviewed' : can.note ? 'You can add a note and send a ticket for review; an Admin or Super Admin completes it' : 'Read-only: nothing here can be changed'} {viewer.expires_at ? ( <> · This link stops working on{' '} {formatDateTime(viewer.expires_at)} ) : null}

{action ? ( setAction(null)} /> ) : null} ); } /** * The one dialog the board needs, switched by whatever was pressed. * * The copy differs because the four actions are different jobs: a note is * something to say, a claim is a question asked of the office, completing is * the answer to it, and sending back is the answer that is not yet a yes. */ const ACTION_COPY: Record< BoardAction['kind'], { title: string; description: string; submit: string; path: string } > = { note: { title: 'Add a note', description: 'Everyone who can see this ticket reads it, including the office and the next crew on it.', submit: 'Add note', path: 'note', }, review: { title: 'Ready for review', description: 'Say how the work was completed. An Admin or Super Admin approves it before the ticket is completed.', submit: 'Send for review', path: 'review', }, complete: { title: 'Complete this ticket', description: 'Approving records the outcome and moves the ticket to Resolved, signed by you.', submit: 'Complete ticket', path: 'complete', }, sendBack: { title: 'Send it back', description: 'The ticket stays where it is and the crew is told what is still needing doing.', submit: 'Send back', path: 'send-back', }, }; function BoardActionDialog({ action, resolutionOptions, onClose, }: { action: BoardAction; resolutionOptions: Array; onClose: () => void; }) { const copy = ACTION_COPY[action.kind]; const form = useForm({ body: '', note: '', resolution: action.claim?.note ?? '', resolution_code: '', review_note: '', }); const submit = (event: FormEvent) => { event.preventDefault(); form.post( `/ticket-status/board/tickets/${action.ticket.id}/${copy.path}`, { preserveScroll: true, onSuccess: () => onClose(), }, ); }; return (