Restructure ticket detail into tabs, add documents section
Ticket detail page now uses tabs (Details, Line Items, Notes, Photos & Docs) instead of a long scrolling page. Photos section gains a Documents category for uploading signed approvals, quotes, and receipts (accepts PDFs). PDF generation button added to header (stub for now).
This commit is contained in:
Ryan Moon
@@ -26,6 +26,7 @@ const PHOTO_CATEGORIES = [
|
||||
{ key: 'intake', label: 'Intake Photos', description: 'Condition at intake' },
|
||||
{ key: 'in_progress', label: 'Work in Progress', description: 'During repair' },
|
||||
{ key: 'completed', label: 'Completed', description: 'Final result' },
|
||||
{ key: 'document', label: 'Documents', description: 'Signed approvals, quotes, receipts' },
|
||||
] as const
|
||||
|
||||
interface TicketPhotosProps {
|
||||
@@ -161,7 +162,7 @@ function PhotoSection({
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept="image/jpeg,image/png,image/webp"
|
||||
accept={category === 'document' ? 'image/jpeg,image/png,image/webp,application/pdf' : 'image/jpeg,image/png,image/webp'}
|
||||
multiple
|
||||
className="hidden"
|
||||
onChange={handleUpload}
|
||||
|
||||
@@ -20,7 +20,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Skeleton } from '@/components/ui/skeleton'
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
|
||||
import { ArrowLeft, Plus, Trash2, RotateCcw, Save } from 'lucide-react'
|
||||
import { ArrowLeft, Plus, Trash2, RotateCcw, Save, FileText, Search } from 'lucide-react'
|
||||
import { toast } from 'sonner'
|
||||
import { useAuthStore } from '@/stores/auth.store'
|
||||
import type { RepairLineItem } from '@/types/repair'
|
||||
@@ -52,11 +52,21 @@ const STATUS_LABELS: Record<string, string> = {
|
||||
|
||||
const STATUS_FLOW = ['in_transit', 'intake', 'diagnosing', 'pending_approval', 'approved', 'in_progress', 'ready', 'picked_up']
|
||||
|
||||
const TABS = [
|
||||
{ key: 'details', label: 'Details' },
|
||||
{ key: 'line-items', label: 'Line Items' },
|
||||
{ key: 'notes', label: 'Notes' },
|
||||
{ key: 'files', label: 'Photos & Docs' },
|
||||
] as const
|
||||
|
||||
type TabKey = typeof TABS[number]['key']
|
||||
|
||||
function RepairTicketDetailPage() {
|
||||
const { ticketId } = useParams({ from: '/_authenticated/repairs/$ticketId' })
|
||||
const navigate = useNavigate()
|
||||
const queryClient = useQueryClient()
|
||||
const hasPermission = useAuthStore((s) => s.hasPermission)
|
||||
const [activeTab, setActiveTab] = useState<TabKey>('details')
|
||||
const [addItemOpen, setAddItemOpen] = useState(false)
|
||||
const [editing, setEditing] = useState(false)
|
||||
const { params, setPage, setSort } = usePagination()
|
||||
@@ -64,7 +74,6 @@ function RepairTicketDetailPage() {
|
||||
const { data: ticket, isLoading } = useQuery(repairTicketDetailOptions(ticketId))
|
||||
const { data: lineItemsData, isLoading: itemsLoading } = useQuery(repairLineItemListOptions(ticketId, params))
|
||||
|
||||
// Edit form state
|
||||
const [editFields, setEditFields] = useState<Record<string, string>>({})
|
||||
|
||||
const statusMutation = useMutation({
|
||||
@@ -131,11 +140,7 @@ function RepairTicketDetailPage() {
|
||||
if (editFields.technicianNotes !== (ticket!.technicianNotes ?? '')) data.technicianNotes = editFields.technicianNotes || undefined
|
||||
if (editFields.estimatedCost !== (ticket!.estimatedCost ?? '')) data.estimatedCost = editFields.estimatedCost ? parseFloat(editFields.estimatedCost) : undefined
|
||||
if (editFields.actualCost !== (ticket!.actualCost ?? '')) data.actualCost = editFields.actualCost ? parseFloat(editFields.actualCost) : undefined
|
||||
|
||||
if (Object.keys(data).length === 0) {
|
||||
setEditing(false)
|
||||
return
|
||||
}
|
||||
if (Object.keys(data).length === 0) { setEditing(false); return }
|
||||
updateMutation.mutate(data)
|
||||
}
|
||||
|
||||
@@ -165,7 +170,7 @@ function RepairTicketDetailPage() {
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="space-y-6 max-w-4xl">
|
||||
<div className="space-y-4 max-w-5xl">
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-3">
|
||||
<Button variant="ghost" size="sm" onClick={() => navigate({ to: '/repairs', search: {} as any })}>
|
||||
@@ -173,13 +178,16 @@ function RepairTicketDetailPage() {
|
||||
</Button>
|
||||
<div className="flex-1">
|
||||
<h1 className="text-2xl font-bold">Ticket #{ticket.ticketNumber}</h1>
|
||||
<p className="text-sm text-muted-foreground">{ticket.customerName}</p>
|
||||
<p className="text-sm text-muted-foreground">{ticket.customerName} — {ticket.instrumentDescription ?? 'No instrument'}</p>
|
||||
</div>
|
||||
<Button variant="outline" size="sm" onClick={() => toast.info('PDF generation coming soon')}>
|
||||
<FileText className="mr-2 h-4 w-4" />PDF
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Status Progress Bar */}
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<CardContent className="pt-6 pb-4">
|
||||
<StatusProgress
|
||||
currentStatus={ticket.status}
|
||||
onStatusClick={hasPermission('repairs.edit') && !isTerminal ? handleStatusClick : undefined}
|
||||
@@ -188,8 +196,9 @@ function RepairTicketDetailPage() {
|
||||
</Card>
|
||||
|
||||
{/* Status Actions */}
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
{hasPermission('repairs.edit') && !isTerminal && (
|
||||
<div className="flex gap-2">
|
||||
<>
|
||||
{nextStatus && (
|
||||
<Button onClick={() => statusMutation.mutate(nextStatus)} disabled={statusMutation.isPending}>
|
||||
Move to {STATUS_LABELS[nextStatus]}
|
||||
@@ -210,21 +219,40 @@ function RepairTicketDetailPage() {
|
||||
Cancel
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Reopen for cancelled tickets */}
|
||||
{ticket.status === 'cancelled' && hasPermission('repairs.admin') && (
|
||||
<Button variant="outline" onClick={() => statusMutation.mutate('intake')} disabled={statusMutation.isPending}>
|
||||
<RotateCcw className="mr-2 h-4 w-4" />
|
||||
Reopen Ticket
|
||||
<RotateCcw className="mr-2 h-4 w-4" />Reopen
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Ticket Details — View or Edit */}
|
||||
{/* Tabs */}
|
||||
<div className="border-b">
|
||||
<div className="flex gap-1">
|
||||
{TABS.map((tab) => (
|
||||
<button
|
||||
key={tab.key}
|
||||
type="button"
|
||||
onClick={() => setActiveTab(tab.key)}
|
||||
className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
|
||||
activeTab === tab.key
|
||||
? 'border-primary text-primary'
|
||||
: 'border-transparent text-muted-foreground hover:text-foreground hover:border-border'
|
||||
}`}
|
||||
>
|
||||
{tab.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tab Content */}
|
||||
{activeTab === 'details' && (
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between">
|
||||
<CardTitle className="text-lg">Details</CardTitle>
|
||||
<CardTitle className="text-lg">Ticket Details</CardTitle>
|
||||
{hasPermission('repairs.edit') && !editing && (
|
||||
<Button variant="outline" size="sm" onClick={startEdit}>Edit</Button>
|
||||
)}
|
||||
@@ -241,24 +269,12 @@ function RepairTicketDetailPage() {
|
||||
{editing ? (
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Customer Name</Label>
|
||||
<Input value={editFields.customerName} onChange={(e) => setEditFields((p) => ({ ...p, customerName: e.target.value }))} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Phone</Label>
|
||||
<Input value={editFields.customerPhone} onChange={(e) => setEditFields((p) => ({ ...p, customerPhone: e.target.value }))} />
|
||||
</div>
|
||||
<div className="space-y-2"><Label>Customer Name</Label><Input value={editFields.customerName} onChange={(e) => setEditFields((p) => ({ ...p, customerName: e.target.value }))} /></div>
|
||||
<div className="space-y-2"><Label>Phone</Label><Input value={editFields.customerPhone} onChange={(e) => setEditFields((p) => ({ ...p, customerPhone: e.target.value }))} /></div>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Instrument</Label>
|
||||
<Input value={editFields.instrumentDescription} onChange={(e) => setEditFields((p) => ({ ...p, instrumentDescription: e.target.value }))} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Serial Number</Label>
|
||||
<Input value={editFields.serialNumber} onChange={(e) => setEditFields((p) => ({ ...p, serialNumber: e.target.value }))} />
|
||||
</div>
|
||||
<div className="space-y-2"><Label>Instrument</Label><Input value={editFields.instrumentDescription} onChange={(e) => setEditFields((p) => ({ ...p, instrumentDescription: e.target.value }))} /></div>
|
||||
<div className="space-y-2"><Label>Serial Number</Label><Input value={editFields.serialNumber} onChange={(e) => setEditFields((p) => ({ ...p, serialNumber: e.target.value }))} /></div>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div className="space-y-2">
|
||||
@@ -273,27 +289,12 @@ function RepairTicketDetailPage() {
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Estimated Cost</Label>
|
||||
<Input type="number" step="0.01" value={editFields.estimatedCost} onChange={(e) => setEditFields((p) => ({ ...p, estimatedCost: e.target.value }))} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Actual Cost</Label>
|
||||
<Input type="number" step="0.01" value={editFields.actualCost} onChange={(e) => setEditFields((p) => ({ ...p, actualCost: e.target.value }))} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Condition Notes</Label>
|
||||
<Textarea value={editFields.conditionInNotes} onChange={(e) => setEditFields((p) => ({ ...p, conditionInNotes: e.target.value }))} rows={2} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Problem Description</Label>
|
||||
<Textarea value={editFields.problemDescription} onChange={(e) => setEditFields((p) => ({ ...p, problemDescription: e.target.value }))} rows={3} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Technician Notes</Label>
|
||||
<Textarea value={editFields.technicianNotes} onChange={(e) => setEditFields((p) => ({ ...p, technicianNotes: e.target.value }))} rows={3} />
|
||||
<div className="space-y-2"><Label>Estimated Cost</Label><Input type="number" step="0.01" value={editFields.estimatedCost} onChange={(e) => setEditFields((p) => ({ ...p, estimatedCost: e.target.value }))} /></div>
|
||||
<div className="space-y-2"><Label>Actual Cost</Label><Input type="number" step="0.01" value={editFields.actualCost} onChange={(e) => setEditFields((p) => ({ ...p, actualCost: e.target.value }))} /></div>
|
||||
</div>
|
||||
<div className="space-y-2"><Label>Condition Notes</Label><Textarea value={editFields.conditionInNotes} onChange={(e) => setEditFields((p) => ({ ...p, conditionInNotes: e.target.value }))} rows={2} /></div>
|
||||
<div className="space-y-2"><Label>Problem Description</Label><Textarea value={editFields.problemDescription} onChange={(e) => setEditFields((p) => ({ ...p, problemDescription: e.target.value }))} rows={3} /></div>
|
||||
<div className="space-y-2"><Label>Technician Notes</Label><Textarea value={editFields.technicianNotes} onChange={(e) => setEditFields((p) => ({ ...p, technicianNotes: e.target.value }))} rows={3} /></div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
@@ -314,7 +315,7 @@ function RepairTicketDetailPage() {
|
||||
{ticket.conditionInNotes && <div><span className="text-muted-foreground">Condition Notes:</span> {ticket.conditionInNotes}</div>}
|
||||
{ticket.technicianNotes && <div><span className="text-muted-foreground">Tech Notes:</span> {ticket.technicianNotes}</div>}
|
||||
</div>
|
||||
<div className="flex gap-6 text-sm">
|
||||
<div className="flex gap-6 text-sm flex-wrap">
|
||||
<div><span className="text-muted-foreground">Estimate:</span> {ticket.estimatedCost ? `$${ticket.estimatedCost}` : '-'}</div>
|
||||
<div><span className="text-muted-foreground">Actual:</span> {ticket.actualCost ? `$${ticket.actualCost}` : '-'}</div>
|
||||
<div><span className="text-muted-foreground">Promised:</span> {ticket.promisedDate ? new Date(ticket.promisedDate).toLocaleDateString() : '-'}</div>
|
||||
@@ -324,28 +325,9 @@ function RepairTicketDetailPage() {
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Photos by Phase */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Photos</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<TicketPhotos ticketId={ticketId} currentStatus={ticket.status} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Notes Journal */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Notes</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<TicketNotes ticketId={ticketId} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Line Items */}
|
||||
{activeTab === 'line-items' && (
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between">
|
||||
<CardTitle className="text-lg">Line Items</CardTitle>
|
||||
@@ -368,6 +350,29 @@ function RepairTicketDetailPage() {
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{activeTab === 'notes' && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Notes</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<TicketNotes ticketId={ticketId} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{activeTab === 'files' && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Photos & Documents</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<TicketPhotos ticketId={ticketId} currentStatus={ticket.status} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -398,23 +403,12 @@ function AddLineItemDialog({ ticketId, open, onOpenChange }: { ticketId: string;
|
||||
})
|
||||
|
||||
function resetForm() {
|
||||
setDescription('')
|
||||
setQty('1')
|
||||
setUnitPrice('0')
|
||||
setCost('')
|
||||
setItemType('labor')
|
||||
setTemplateSearch('')
|
||||
setShowTemplates(false)
|
||||
setDescription(''); setQty('1'); setUnitPrice('0'); setCost(''); setItemType('labor'); setTemplateSearch(''); setShowTemplates(false)
|
||||
}
|
||||
|
||||
function selectTemplate(template: { name: string; instrumentType: string | null; size: string | null; itemType: string; defaultPrice: string; defaultCost: string | null }) {
|
||||
const desc = [template.name, template.instrumentType, template.size].filter(Boolean).join(' — ')
|
||||
setDescription(desc)
|
||||
setItemType(template.itemType)
|
||||
setUnitPrice(template.defaultPrice)
|
||||
setCost(template.defaultCost ?? '')
|
||||
setShowTemplates(false)
|
||||
setTemplateSearch('')
|
||||
setDescription(desc); setItemType(template.itemType); setUnitPrice(template.defaultPrice); setCost(template.defaultCost ?? ''); setShowTemplates(false); setTemplateSearch('')
|
||||
}
|
||||
|
||||
function handleSubmit(e: React.FormEvent) {
|
||||
@@ -434,78 +428,36 @@ function AddLineItemDialog({ ticketId, open, onOpenChange }: { ticketId: string;
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader><DialogTitle>Add Line Item</DialogTitle></DialogHeader>
|
||||
|
||||
{/* Template picker */}
|
||||
<div className="relative">
|
||||
<Label>Quick Add from Template</Label>
|
||||
<Input
|
||||
placeholder="Search templates (e.g. rehair, valve)..."
|
||||
value={templateSearch}
|
||||
onChange={(e) => { setTemplateSearch(e.target.value); setShowTemplates(true) }}
|
||||
onFocus={() => templateSearch && setShowTemplates(true)}
|
||||
className="mt-1"
|
||||
/>
|
||||
<div className="relative mt-1">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||||
<Input placeholder="Search templates..." value={templateSearch} onChange={(e) => { setTemplateSearch(e.target.value); setShowTemplates(true) }} onFocus={() => templateSearch && setShowTemplates(true)} className="pl-9" />
|
||||
</div>
|
||||
{showTemplates && templateSearch.length > 0 && (
|
||||
<div className="absolute z-50 mt-1 w-full rounded-md border bg-popover shadow-lg max-h-48 overflow-auto">
|
||||
{templates.length === 0 ? (
|
||||
<div className="p-3 text-sm text-muted-foreground">No templates found</div>
|
||||
) : (
|
||||
templates.map((t) => (
|
||||
<button
|
||||
key={t.id}
|
||||
type="button"
|
||||
className="w-full text-left px-3 py-2 text-sm hover:bg-accent flex justify-between"
|
||||
onClick={() => selectTemplate(t)}
|
||||
>
|
||||
{templates.length === 0 ? <div className="p-3 text-sm text-muted-foreground">No templates found</div> : templates.map((t) => (
|
||||
<button key={t.id} type="button" className="w-full text-left px-3 py-2 text-sm hover:bg-accent flex justify-between" onClick={() => selectTemplate(t)}>
|
||||
<span>{t.name}{t.instrumentType ? ` — ${t.instrumentType}` : ''}{t.size ? ` ${t.size}` : ''}</span>
|
||||
<span className="text-muted-foreground">${t.defaultPrice}</span>
|
||||
</button>
|
||||
))
|
||||
)}
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="relative flex items-center gap-2 py-1">
|
||||
<div className="flex-1 border-t" />
|
||||
<span className="text-xs text-muted-foreground">or fill manually</span>
|
||||
<div className="flex-1 border-t" />
|
||||
</div>
|
||||
|
||||
<div className="relative flex items-center gap-2 py-1"><div className="flex-1 border-t" /><span className="text-xs text-muted-foreground">or fill manually</span><div className="flex-1 border-t" /></div>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Type</Label>
|
||||
<Select value={itemType} onValueChange={setItemType}>
|
||||
<SelectTrigger><SelectValue /></SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="labor">Labor</SelectItem>
|
||||
<SelectItem value="part">Part</SelectItem>
|
||||
<SelectItem value="flat_rate">Flat Rate</SelectItem>
|
||||
<SelectItem value="misc">Misc</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Description *</Label>
|
||||
<Input value={description} onChange={(e) => setDescription(e.target.value)} required />
|
||||
<Select value={itemType} onValueChange={setItemType}><SelectTrigger><SelectValue /></SelectTrigger><SelectContent><SelectItem value="labor">Labor</SelectItem><SelectItem value="part">Part</SelectItem><SelectItem value="flat_rate">Flat Rate</SelectItem><SelectItem value="misc">Misc</SelectItem></SelectContent></Select>
|
||||
</div>
|
||||
<div className="space-y-2"><Label>Description *</Label><Input value={description} onChange={(e) => setDescription(e.target.value)} required /></div>
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Qty</Label>
|
||||
<Input type="number" step="0.001" value={qty} onChange={(e) => setQty(e.target.value)} />
|
||||
<div className="space-y-2"><Label>Qty</Label><Input type="number" step="0.001" value={qty} onChange={(e) => setQty(e.target.value)} /></div>
|
||||
<div className="space-y-2"><Label>Unit Price</Label><Input type="number" step="0.01" value={unitPrice} onChange={(e) => setUnitPrice(e.target.value)} /></div>
|
||||
<div className="space-y-2"><Label>Cost (internal)</Label><Input type="number" step="0.01" value={cost} onChange={(e) => setCost(e.target.value)} placeholder="Optional" /></div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Unit Price</Label>
|
||||
<Input type="number" step="0.01" value={unitPrice} onChange={(e) => setUnitPrice(e.target.value)} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Cost (internal)</Label>
|
||||
<Input type="number" step="0.01" value={cost} onChange={(e) => setCost(e.target.value)} placeholder="Optional" />
|
||||
</div>
|
||||
</div>
|
||||
<Button type="submit" disabled={mutation.isPending}>
|
||||
{mutation.isPending ? 'Adding...' : 'Add'}
|
||||
</Button>
|
||||
<Button type="submit" disabled={mutation.isPending}>{mutation.isPending ? 'Adding...' : 'Add'}</Button>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
Reference in New Issue
Block a user